API, JQuery e Segurança com CORS

ASP.NET

Wednesday, October 23, 2024

api_jquery_e_seguranca_com_cors

Olá meu nome é Mauricio Junior e o hoje eu vou te mostrar sobre CORS. CORS significa (Cross-Origin Requests), isso quer dizer qualquer request precisa ser verificado para consumir a Api que você publicou. É importante verificar e desabilitar os endereços e ter um pouco de segurança para evitar que qualquer chamada de dados seja respondida.

Eu vou mostrar como fazer uma chamada com JQuery para a sua Api.

O C# e Api pode habilitar ou desabilitar as chamadas de forma automática. Para habiltiar e permitir que qualquer chamada seja aceita em sua Api, é necessário adicionar o AlowAnyHeader(), AllowAnyMethod() e AllowAnyOrigin() dentro do ConfigureServices método.

public void ConfigureServices(IServiceCollection services)
{
    //add cors
    services.AddCors(options =>
    {
        options.AddPolicy("Policy", builder =>
        {
            builder
            	.AllowAnyHeader()
            	.AllowAnyMethod()
            	.AllowAnyOrigin();
        });
    });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
	app.UseCors("Policy");
}

Código 1.1

Onde está o método ConfigureServices? Está dentro do Startup.cs ou Program.cs dependendo da versão que está utilizando.

Eu tenho uma Api que retorna todos os cursos da plataforma.academy em meu localhost e quando eu tento acessar usando um simples JQuery, o acesso é cortado e para conseguir resolver esse problema, eu tive que permitir o acesso usando o código 1.1.

No código 1.2 eu mostro como fazer a chamada usando JQuery para pegar os dados da Api criada por mim.

<!DOCTYPE html>  
<html>  
<head>  
<title>Courses</title>  
<meta charset="utf-8" />  
<script type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  

<script type="text/javascript">  
    $(document).ready(function () {               
            $.ajax({  
                type: "GET",  
                url: "https://localhost:5001/api/course", 
                contentType: "application/json; charset=utf-8",  
                dataType: "json",  
                success: function (response) {  

                    //Clear all previous list of members  
                    $("#Courses").empty();  

                    //Display Asp.Net Web API response in console log   
                    //You can see console log value in developer tool   
                    //by pressing F12 function key.  
                    console.log(response);  


                    // Variable created to store <li>Memeber Detail</li>  
                    var ListValue = "";  

                    //Variable created to iterate the json array values.  
                    var i;  

                    //Generic loop to iterate the response arrays.  
                    for (i = 0; i < response.length; ++i) {  
                        ListValue += "<li>" + response[i].title + " --- " + response[i].courseLink  
                    }  

                    //Add/Append the formatted values of ListValue variable into ID called "Courses"  
                    $("#Courses").append(ListValue);  
                },  
                failure: function (response) {  
                    alert(response.responseText);  
                    alert("Failure");  
                },  
                error: function (response) {  
                    alert(response);  
                    alert("Error");  
                }  
       });  
    });  
</script>  
</head>
<body>  
	<h2>Plataforma.Academy</h2>        
	<ul id="Courses">  
	</ul>  
</body>  
</html>

Código 1.2

No código 1.3 eu mostro o Json que a Api vai retornar mas no momento eu vou usar apenas as propriedades chamadas title e courseLink.

[
  {
    "title": "string",
    "courseLink": "string",
    "status": "string",
    "imageCourse": "string",
    "courseCategoryId": 0,
    "courseDescription": "string",
    "coursePrice": "string",
    "courseOldPrice": "string",
    "courseCategoyLink": "string"
  }
]

Código 1.3

Sem as propriedades alteradas dentro da configuração da Api, quando o HTML, JavaScript e JQuery tentam acessar o endereço, um erro é retornado para o JavaScript que pode ser visto dentro do log.

  [Error] Origin null is not allowed by 
  Access-Control-Allow-Origin. Status code: 204

  [Error] XMLHttpRequest cannot load 
  https://localhost:5001/api/course due to access control checks.

  [Error] Failed to load resource: Origin null is not 
  allowed by Access-Control-Allow-Origin. Status code: 204 (course, line 0)

Note que as mensagens mostram claramente sobre a permissão de acesso original. Tenha em mente autorizar apenas endereços conhecidos por você ou pelo seu sistema. Para adicionar diferentes endereços no CORS, é necessário fazer conforme o código 1.4.

//add cors
services.AddCors(options =>
{
    options.AddPolicy("Policy", builder =>
    {
        builder.WithOrigins("https://plataforma.academy", "site2", "site3");
    });
});

Código 1.4.

Veja o resultado da página HTML consumindo a Api.

Qualquer dúvida pode entrar em contato comigo pelo meu site www.mauriciojunior.net ou pode acessar diretamente os cursos da escola de programação academy Escolha de Programação