Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to win at CORS

jakearchibald.com

Post reply on HN
Print view View original

31–40 of 128 posts

Re: How to win at CORS

#31

Post by adminscoffee »

jaffathecake wrote: post #14
chrismorgan wrote: post #3

Point of fairly idle curiosity about the presentation of the article: why do you put a trailing slash on your empty elements (img, link) in your code samples? Some aren’t aware that the trailing slash is useless in the HTML syntax, simply being ignored by the parser and not doing anything. (Except for in inline SVG and MathML content, which switch the parser into a more XML-like mode where the trailing slash behaves…

Author here! I used to have strong feelings about formatting stuff like this, but I since realised there are better things to spend effort on. For formatting, I just let https://prettier.io/ do it's thing, and it added the />. Although I do configure it to use single quotes in JS, so I guess I still have some opinion there. In terms of HTML, how far does your "but it isn't necessary" opinion go? Lots of closing eleme…

very cool, wish dart/flutter made the list.

Re: How to win at CORS

#32

Post by chrismorgan »

Waterluvian wrote: post #16
kadoban wrote: post #9

Earlier quoted context omitted.

Aren't they optional 100% of the time though?

Not 100%. There are a small handful of really wicked gotchas. I think there’s a lot of articles on them. I can’t find the one I like and don’t want to share one I haven’t read yet.

Here’s an example in each direction.

In this first example, ASI inserts an undesired semicolon:

  return
  {a: 0}
This returns undefined, and doesn’t continue on to execute the block containing a statement 0 with label a. (Change it to {a: 0, b: 0} and you get a syntax error because of this reinterpretation of what was intended as an object literal.)

In this second example, ASI doesn’t insert a desired semicolon:

  f()
  [].forEach.call(…)
This becomes a syntax error, because the [] has become subscripting rather than an array literal. (Incidentally, [].forEach is smelly anyway; prefer Array.prototype.forEach, maybe assign that to a constant if you’re doing it much.)

Re: How to win at CORS

#34

Post by chrismorgan »

jaffathecake wrote: post #26
chrismorgan wrote: post #19

Earlier quoted context omitted.

Well, for my own personal stuff I omit just about all that I can—head/body start and end tags, html end tag (not start tag because it has at least a lang attribute), tbody start tag where possible, thead/tbody/tfoot/tr/th/td/li/dt/dd/p end tags almost all of the time, attribute value quotes where valid… mostly just because it’s fun doing so, and in some cases because it makes things decidedly cleaner (especially tabl…

Seems like your HTML formatting opinions are very similar to the owner of the fetch spec! Yeah, I don't always agree with Prettier, but ugh, I wasted hours in my early career arguing about formatting with teammates, but now I just let Prettier do it's thing, get over it, and spend the time on something else.

Hence me only living life on the edge like that in personal projects! Most of what I write with others these days is in Rust, and I definitely go along with using rustfmt on such projects, even if I regularly dislike its opinions (sometimes even strongly).

Re: How to win at CORS

#35

Post by srgpqt »

chrismorgan wrote: post #23
doliveira wrote: post #18

Earlier quoted context omitted.

The name is literally a "self-closing tag", isn't it? And it's better for someone else reading: you may not recall what the tag is, but you know you don't have to look for a closing tag below.

But that’s the thing— it doesn’t do that . If you want an empty div, you can’t write , because that’s equivalent to just ; you’ll have to write instead.

It’s just that some tags (like IMG) are always self-closing, some are never self closing (DIV) and some can optionally be closed (P). The trailing / just signals the reader that the tag is meant to end then and there.

Re: How to win at CORS

#36

Post by jaffathecake »

88913527 wrote: post #28
jaffathecake wrote: post #27

Earlier quoted context omitted.

Author here! The post covers this detail. This happens because your response is missing a Vary header. Getting Vary right isn't just important for Chrome, it's important for CDNs too.

You're right, the real issue is CloudFront won't include Origin in the Vary response header if it wasn't included in the initial request. And if you change your HTML attributes, you're changing your request, but you essentially end up with a poisoned local cache. Rolling out crossorigin="anonymous" on previously cached assets is a subtlety you won't know about (even if you think you know CORS) until your site breaks…

Yeah, it's generally understood that you need to change the URL to cache-bust when the content changes, but it's easy to forget that you need to do the same thing if important headers change.

Hmm, I think I'll add a section to the article on this when I'm back at my laptop.

Re: How to win at CORS

#37

Post by thepasswordis »

CORS has been no shortage of greys in my beard!

When I'm writing some frontend that is hosted on localhost, with an API that is hosted on its domain somewhere, it always is some sort of PITA to get the dev environ started.

There's a plugin for firefox that ignores CORS which is helpful for this. It's becoming less useful for me as my APIs now usually have a toggle to add a cross origin header which allows localhost. Still useful.

Re: How to win at CORS

#38

Post by roca »

I tried really hard to get and to default to requiring same-origin but people were still skeptical about CORS deployment, and there were also arguments for consistency with . Oh well, I think we eventually got to a consensus that that "consistency" is not worth having.

Re: How to win at CORS

#39

Post by hsbauauvhabzb »

soniczentropy wrote: post #21
hsbauauvhabzb wrote: post #15

Earlier quoted context omitted.

To be fair, there are many web devs who have never needed to worry about cross origin resource sharing

How do you become one of those kind instead of smashing your face against CORS constantly

Legacy developers would be the biggest group.

Re: How to win at CORS

#40

Post by hsbauauvhabzb »

5e92cb50239222b wrote: post #25
hsbauauvhabzb wrote: post #15

Earlier quoted context omitted.

To be fair, there are many web devs who have never needed to worry about cross origin resource sharing

Usually the same ones who then download plugins like https://addons.mozilla.org/en-US/firefox/addon/access-contro... because properly configuring the backend is ¨too complicated¨. Been there, done that.

You can use the origin announce headers from Firefox to block cors also, unsure if that works with chrome.

But I was referring to legacy code (or those whose SPA is stored on the same domain as API endpoints).

Post reply on HN