-2

I have an idea have for a webapp to help me improve my front end development. When I'm refactoring front end code I want to be able to quickly visually check through all the instances on my site.

My current plan is to load them within a series of iframes and to be able to flick through instances on each iframe. After discussing it with a friend, the plan we came up with was to use a js script to 1) give iframe/CORS access to the page and 2) scan the page and send instances of the class to the parent (the site with the iframe). I want the site to run separately so it can be a stand alone project. (So I'm running "CSS Friend" on localhost:4000 and the site I'm refactoring on localhost:3000.

The use of a js script would be ideal so that no matter your framework, you could add this script to your application.html file and then it would work.

I am able to give CORS access to iframes through changing my config settings in my development.rb file (as in sever side), but when I run:

<script>
      console.log("script working");

      var method = "POST";
      var url = "http://localhost:4000";

      var xhr = new XMLHttpRequest();

      xhr.open(method, url);

      xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
      xhr.setRequestHeader("Access-Control-Allow-Origin", "*");

      var text = {"command":"PUSH"};
      xhr.send(text);
</script>

(An idea from this answer: javascript set header Access-Control-Allow-Origin)

I get the following error:

Access to XMLHttpRequest at 'http://localhost:4000/post' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is it possible to change CORS setting with a JS script, or does it always have to happen on the server side?

JoshuaESummers
  • 493
  • 2
  • 7
  • 24
  • No it is not possible...period!. Use a proxy, either third party or on your own server. The answer you pointed to is very misguided – charlietfl Aug 02 '20 at 14:21
  • Re-reading this , you just need to implement CORS middleware on your 4000 port back end – charlietfl Aug 02 '20 at 14:38

1 Answers1

0

You can't change the CORS policy with javascript, because the CORS policy exists to make sure any random website, can't do whatever malicious thing it wants to do. This would all be useless if you could turn it off with javascript.

It exists to protect you against javascript, so it's obvious javascript can't turn it off. It would be a bit like writing your password on a note next to your computer. It'd be a bit pointless.

What you could do however (on the server side), Is attach a "Access-Control-Allow-Origin: *" header to the http response from localhost:4000.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

  • When you say `Is attach a "Access-Control-Allow-Origin: *" header to the http response from localhost:4000` - if my "child" (within the iframe) is on port 3000, you mean from localhost:3000? – JoshuaESummers Aug 02 '20 at 14:26
  • No, when localhost:4000 sends back it's response, it should have this response header: "Access-Control-Allow-Origin: *". –  Aug 02 '20 at 14:30
  • read more here: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing#How_CORS_works. –  Aug 02 '20 at 14:34