#access-control-allow-origin

To enable Nginx for Cross Origin calls add this in nginx configuration for the domain  :

location /{

add_header ‘Access-Control-Allow-Origin’ ‘http://subdomain.mind-geek.net’; add_header ‘Access-Control-Allow-Credentials’ ‘true’; add_header ‘Access-Control-Allow-Methods’ ‘GET’;

}

Recently while developing a web application I encountered an issue “No Access-Control-Allow-Origin header is present on the requested resource”.

Well, what I was doing was trying to access an API that was not within my application boundary. At first was scratching my head as to what it was. After reading articles and blogs I solved the problem.

Thought it would be a good idea to pen down my…

ID/パスワードを入力するログイン画面をSSL通信にして、それ以外のところはSSLは使わない。なんてことがよくありました。

そんな場合、

Webサーバーまたはリバースプロキシでログイン画面へのリクエストをhttpsにそれ以外をhttpに転送する

ログイン画面へのリンクをhttpsにして、ログイン成功時のリダイレクトをhttpにする

なんて方法をとるわけで、たいして考えずに実装していました。

今回、ログイン画面にlightbox的なものを使うことにしたら、少し話がややこしくなりました。

というのは、普通に実装したら、lightbox的なものの中でログイン画面を呼び出したレスポンスが、「Ajaxなのでクロスドメインなアクセスはできません」っていうことで、エラーになったのです。

つまり、 http://mydomain.com/ と https://mydomain.com/ は違うドメインということになり、javascript的に安全ではないということでした。

少し前までは、そんな場合はJSONPを使えとかいうことになっていましたが、Access-Control-Allow-Origin という方法があるんですね。今は。

[nginx.conf] server { add_header Access-Control-Allow-Origin *; }

Access-Control-Allow-Origin ヘッダーを返すとクロスドメインなAjaxがOKになるってことで嬉しい限りです。

参考

jquery - Ajax using https on an http page - Stack Overflow

If you've deployed even a mildly complex web application in the last few years, you've probably had to care about CORS headers. They allow webpages to make requests to another domain, or the same domain on another scheme. Without them, you'll find that trying to request other assets will be forbidden by your browser, and things won't load.

They're relatively simple to implement. You just add a header:

Access-Control-Allow-Origin: https://www.alexjs.im

to the HTTP responses of assets you'd like to call in your webapp. Thanks to Michiel Kalkman's gist you can easily achieve this in Nginx - with something relatively standards compliant, too.

The problem, it seems, is that despite the W3C spec and RFC 6454 prescribing the use of a list of origins, not all browsers (e.g. Firefox) support multiple domains in an Access-Control-Allow-Origin header:

Access-Control-Allow-Origin: https://www.alexjs.im https://www.alexsmith.org

The easiest solution is to use a wildcard:

Access-Control-Allow-Origin: *

However that can cause some security implications. The best compromise I've found to get around this was to implement a simple whitelist in the Nginx config and match against that. I've put this in a public gist - and I'm testing it for deployment now.

In Javascript, there's an XMLHttpRequest object that lets you make HTTP requests and pull down data.  This is the core functionality for AJAX functionality which updates your page dynamically.

This apparently leads to some security vulnerabilities, which I'm not too familiar with.  Some are called Cross-Site Scripting (XSS) attacks.  

While a Javascript program could have been downloaded from anywhere using the <script> tag, the program can only use XMLHttpRequest to make requests on the same site that the original web page originated on.  This limitation was originally put in as a security feature.  Unfortunately, there's a lot of cool non-malicious stuff that this limitation blocks as well.

On newer browsers, XMLHttpRequest can access other sites, but only if the destination site includes an access-control-allow-origin response header.  The exception is IE8, which requires the Javascript program to use the XDomainReqest object instead of XMLHttpRequest.  The access-control-allow-origin limitation means you can only access sites that explicitly allow third parties to access.