Question 214544 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Getting CORS issue in API calling from AJAX

I am getting CORS issue while calling API from Ajax with header Content-Security-Policy":"frame-ancestors 'none'.

My APIs are built in Java spring boot. API server is already configured with Access-Control-Allow-Origin : *. If i remove Content-Security-Policy":"frame-ancestors 'none', the API is working perfectly fine.

Below is request :

$.ajax({url: "https://****.com/api/v2/login",
    type: 'post',
    data: JSON.stringify(domain),
    headers: {
      "x-dreamfactory-api-key":'*******',
      "x-frame-options":'deny',
      "Content-Security-Policy":"frame-ancestors 'none'",
      "pragma":'no-cache',
      "sec-fetch-mode":'cors',
      "Referer":'https://****.com',
      "origin":'https://****.com',
      "sec-fetch-site":'same-site',
      "sec-fetch-dest":'empty',
      "Content-Type":'application/json'
    },
    dataType: 'json',
    success: function (data) {
        console.log(JSON.stringify(data));
    }
  });

My API configuration using WebMVCConfigurationSupport below :

@Override

public void addCorsMappings(CorsRegistry registry) {

registry.addMapping("/v2/**").allowedMethods("PATCH","GET", "POST", "OPTIONS","PUT", "DELETE").allowedOrigins("*")
.allowedHeaders("*").allowCredentials(true);
}
Tags:

2

Answers


  1. 0

    Content-Security-Policy is a response header:

    The HTTP Content-Security-Policy response header allows website
    administrators to control resources the user agent is allowed to load
    for a given page.

    So it makes no sense to send it in an AJAX request.

    Login or Signup to reply.
  2. 0

    I have the same problem but I searched about CORS and Content-Security-Policy or CSP. I can share some of my search about it here:
    CORS (Cross-Origin Resource Sharing) and CSP (Content Security Policy) are two separate mechanisms that control access to resources.

    CORS is a mechanism that allows many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated.

    The Content-Security-Policy response header is mainly used for preventing cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context.
    The issue here is not with CORS but with the Content Security Policy (CSP). You are setting frame-ancestors none, which means the page can’t be framed by any page, including one from the same origin. This is likely causing your issue.
    The frame-ancestors directive in the Content Security Policy (CSP) instructs the client how to handle rendering when the page is the target of a nested browsing context, such as <frame>, <iframe>, <object>, <embed>, or <applet>.
    When you include "Content-Security-Policy": "frame-ancestors 'none'" in your request, you’re telling the server that the response shouldn’t be embedded into an <iframe>, <object>, <embed>, etc.

    As the error indicates, the setting is preventing the response from being loaded due to the Content Security Policy. If you want your request to succeed, you need to adjust your CSP setting accordingly or remove it if it’s not necessary for your use case.

    Remember that client-side settings can’t dictate how the server responds. The CSP should be set on the server’s response, not on the client’s request. If the server needs to send a CSP, it would do so in its responses, not listen for one in the requests.

    As a general rule, it’s the server’s responsibility to include the Content-Security-Policy header in its response to the client. Including this header in the client-side request generally has no effect and can lead to confusion, as seen in this case.

    In conclusion, consider managing CSP on the server side, and ensure your CORS settings permit the requests from the origins you expect. Remember to ensure the necessary HTTP methods and headers are allowed.

    Apologies if this is a bit long, but I felt it necessary to explain the main concepts.

    I hope it can help you 🙂

    Best regards.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search