Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

cors header for @crossorigin attribute #797

Closed
paulirish opened this Issue · 8 comments

3 participants

@paulirish
Owner

https://developer.mozilla.org/en/CORS_Enabled_Image

so how this works is you do <img src="http://foreign.com/logo.png" crossOrigin /> and then a supporting browser sends a CORS request header.. if the server is configured correctly it replies with a CORS response header

and then supporting browsers can now use that image in canvas and webgl despite the fact that it's crossdomain.

i'd love this in the .htaccess (and others). at least documented but probably not enabled.

it'd go near the other CORS stuff... https://github.com/paulirish/html5-boilerplate/blob/master/.htaccess#L37-47

@nimbupani

What needs to be added to .htaccess? An example use?

@paulirish
Owner

if server gets a CORS request header, it should give a CORS response header

i think we can leave a default for images ON. and document others.

@mathiasbynens

Ref. http://www.html5rocks.com/en/tutorials/cors/

The first thing to note is that a valid CORS request always contains an Origin header.

So then the response goes:

Access-Control-Allow-Origin: http://api.example.com/
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar

From the above article:

All CORS related headers are prefixed with Access-Control-. Here’s some more details about each header.

Access-Control-Allow-Origin (required) - This header must be included in all valid CORS responses; omitting the header will cause the CORS request to fail. The value of the header can either echo the Origin request header (as in the example above), or be a * to allow requests from any origin. If you’d like any site to be able to access your data, using * is fine. But if you’d like finer control over who can access your data, use an actual value in the header.

Access-Control-Allow-Credentials (optional) - By default, cookies are not included in CORS requests. Use this header to indicate that cookies should be included in CORS requests. The only valid value for this header is true (all lowercase). If you don't need cookies, don't include this header (rather than setting its value to false). The Access-Control-Allow-Credentials header works in conjunction with the withCredentials property on the XmlHttpRequest2 object. Both these properties must be set to true in order for the CORS request to succeed. If .withCredentials is true, but there is no Access-Control-Allow-Credentials header, the request will fail (and vice versa). It’s recommended that you don’t set this header unless you are sure you want cookies to be included in CORS requests.

Access-Control-Expose-Headers (optional) - The XmlHttpRequest2 object has a getResponseHeader() method that returns the value of a particular response header. During a CORS request, the getResponseHeader() method can only access simple response headers. Simple response headers are defined as follows:

  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

If you want clients to be able to access other headers, you have to use the Access-Control-Expose-Headers header. The value of this header is a comma-delimited list of response headers you want to expose to the client.

In other words, if the server gets an Origin header, we should send out Access-Control-Allow-Origin: *.


How about this?

SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "*" env=IS_CORS

SetEnvIf requires the second argument, which will be used as a regex. I just used : there, as Origin headers are supposed to have a scheme anyway.
Note that this requires the mod_setenvif module. (Based on example 4 of http://httpd.apache.org/docs/2.0/mod/mod_headers.html#examples)

Tested using:

curl -sIH "Origin: http://example.com/" "http://localhost/index.html" | grep "Access"
@paulirish
Owner

Sounds so excellent, mathias. Nice work!

@paulirish
Owner

The spec agrees with this approach: http://dvcs.w3.org/hg/cors/raw-file/tip/Overview.html#resource-requests

Let's do it.

@paulirish paulirish reopened this
@paulirish
Owner

Reopening...

I was curious if we should allow this on all files or just images.. Here was some feedback from Michael Hausenblaus, one of the guys behind enable-cors.org: 2727fa2#commitcomment-774169

I looked into if the @crossOrigin attribute works on anything other than images. It doesn't. Mozilla and WebKit's patches solely work on the image element.

I think we should scope this fix to be just on images.. Let's keep this issue open till we have that.

Also this has good stuff: https://wiki.mozilla.org/Security/Reviews/crossoriginAttribute

@mathiasbynens

I might’ve solved this in 23bd766. I think I got the most popular image formats covered, but let me know if I missed any!

@moimikey moimikey referenced this issue from a commit in moimikey/html5-boilerplate
@mathiasbynens mathiasbynens Send CORS headers if browsers request them. This enables CORS-enabled…
… images (@crossorigin). Closes #797.
5f70b55
@moimikey moimikey referenced this issue from a commit in moimikey/html5-boilerplate
@mathiasbynens mathiasbynens Only send CORS headers for images by default
Ref. #797.
c449b93
@smooshy smooshy referenced this issue from a commit in smooshy/html5-boilerplate
@mathiasbynens mathiasbynens Only send CORS headers for images by default
Ref. #797.
313d982
@alrra alrra referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
@alrra alrra referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
@alrra alrra referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
@alrra alrra referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.