Browser not setting the origin header for cross origin requests?

Question

I have a simple index.html file. This html is loading from localhost:3000

<body>
    <h1>Some app</h1>
    <script src="http://localhost:3005/script.js"></script>
</body>

The script.js is set to load from another origin: localhost:3005.

From my understanding, The browser should intercept the request and add the origin header to it - and make a preflight request to localhost:3005 server to check if localhost:3000 is allowed.

But i'm getting no origin. The browser doesn't seem to add the origin header. This is the server responsible for serving the script.js file (localhost:3005). I'm using the cors module.

const app = express()

const whitelist = ["http://localhost:3001"]
const corsOptions = {
    origin: function(origin, callback) {
        console.log("origin is: ", origin);      //undefined -- why is undefined??

        if (whitelist.indexOf(origin) !== -1) {
            callback(null, true)
        }
        else {
            callback(new Error('Not allowed by CORS'))
        }
    }
}

app.use(cors(corsOptions), express.static(__dirname))
app.listen(3005, () => {
    console.log("server listening on port 3005")
})

My actual goal is to white-list only localhost:3000 for asking for my script.js

And i put localhost:3001 just to test if i'm actually getting a cors error - as it should be.

But i'm not even getting the origin - what is causing this? I'm getting the same behavior in both Firefox and Chrome. Did i misunderstood this hole process? Thanks :)

EDIT: Maybe seeing the request helps

Browsers don’t send the Origin request header for requests that fetch src URLs. Those requests are made with the fetch mode set to 'no-cors', and the Origin request header is not sent for 'no-cors' requests. Basically, browsers send the Origin header only for requests made using XHR or the Fetch API (or from JavaScript-library Ajax methods build on XHR or the Fetch API) or if the request HTTP method isn’t GET, or if the request is initiated from an HTML element with the 'crossorigin' attribute. fetch.spec.whatwg.org has the details — sideshowbarker
– sideshowbarker, Commented Feb 12, 2018 at 22:44

Kevin Christopher Henry · Accepted Answer · 2018-02-12 20:45:43Z

2

I think you might be misunderstanding the purpose of CORS. It gives servers the ability to opt-in to certain kinds of requests that would otherwise be disallowed under the browser's Same Origin Policy. It doesn't provide a mechanism to disallow requests that were previously allowed.

Executing scripts from foreign origins in the src of a <script> tag has always been allowed under the Same Origin Policy, and so CORS simply doesn't apply. That's why there's no header on the request.

My actual goal is to white-list only localhost:3000 for asking for my script.js.

You can't use CORS for that. In fact, you probably can't do that at all. I would take a step back and ask why you want to do that. If you're trying to secure private data then some sort of authentication mechanism (tokens, cookies, whatever) is probably necessary.

answered Feb 12, 2018 at 20:45

Kevin Christopher Henry

49.7k8 gold badges125 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jauny Over a year ago

Thanks for the answer, that helped me. I am building an API to server images, and so those images are usually requested through another website's <img> tag. Are there any ways for me to know what host those requests are coming from?

Kevin Christopher Henry Over a year ago

@Jauny: Look into the Referer header, that's probably your best bet.

Jauny Over a year ago

yep you are right! I was getting an empty referer because all my requests were coming from the same domain, but now that I'm getting external requests, it is working!

Pas · Accepted Answer · 2019-02-12 05:55:43Z

For others who may come across this question, here is a practical demonstration of Kevin Christopher Henry's accepted answer above.

This first code snippet below requests a script (a .js file with an src URL) from the domain www.w3schools.com (and automatically executes it too upon the success of request, but that's not important here). Two things to note here:

This request for a script is being made to a different domain (www.w3schools.com) than where it's originating from.
This runs successfully.

$.ajax({
  url: 'https://www.w3schools.com/lib/w3codecolor.js',
  dataType: "script",
  success: function(data, status) {
    console.log('Result:', status)
  },
  error: function(err, status) {
    console.log('Error:', error);
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This second code snippet below requests a URL (https://www.w3schools.com/bootstrap) to a specific route/page from the domain www.w3schools.com using XHR . This is what you would use when making requests to API endpoints. This is what CORS has jurisdiction over. Two things to note here:

This request is being made to a different domain (www.w3schools.com) than where it's originating from.
This fails because modern browsers restrict cross-origin HTTP requests (see more) by default. Now the only way around this is by configuring CORS on www.w3schools.com domain to accept XHR requests from outside its own domain.

$.ajax({
  url: 'https://www.w3schools.com/bootstrap',
  success: function(data, status) {
    console.log('Result:', status)
  },
  error: function(err, status) {
    console.log('Error:', err);
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The error here is ambiguous. To see the actual CORS error, open Web Developers Console and you should see something like

"Access to XMLHttpRequest at 'https://www.w3schools.com/bootstrap' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

Now the reason why the error says "from origin 'null'" is because these code snippets are probably being run from sandboxed environments where it's not even setting the request header Origin to "https://stackoverflow.com".

However, the result would be the same if the Origin was actually set to "https://stackoverflow.com". Feel free to copy paste the above scripts into Web Developer Console and try it out.

The distinction in this example is not clear. The first request is successful cause jquery adds a "sec-fetch-mode: no-cors" header, the second fails due to not having that header. If you try fetch("w3schools.com/bootstrap", {mode: 'no-cors'}) you can see it working.

Collectives™ on Stack Overflow

Browser not setting the origin header for cross origin requests?

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related