この記事では、JavaScript の同一オリジン ポリシーとクロスドメイン アクセスを主に紹介し、JavaScript の同一オリジン ポリシーとクロスドメイン アクセスの原理、実装、使用法、および関連する注意事項を例の形で詳しく分析します。必要な場合は、以下を参照してください
この記事の例では、JavaScript の同一オリジン ポリシーとクロスドメイン アクセスについて説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
1. 同一オリジンポリシーとは何ですか
クロスドメインを理解するには、まず同一オリジンポリシーを理解する必要があります。同一生成元ポリシーは、セキュリティ上の理由からブラウザに実装される非常に重要なセキュリティ ポリシーです。
同一オリジンとは:
URLはプロトコル、ドメイン名、ポート、パスで構成されます。2つのURLのプロトコル、ドメイン名、ポートが同じである場合、それらは同じオリジンを持つことを意味します。
同一生成元ポリシー:
ブラウザの同一生成元ポリシーは、異なるソースからの「ドキュメント」またはスクリプトによる現在の「ドキュメント」の特定の属性の読み取りまたは設定を制限します。 (ホワイトハットは Web セキュリティについて語ります [1])
あるドメインからロードされたスクリプトは、別のドメインのドキュメント属性にアクセスすることを許可されません。
例:
たとえば、悪意のある Web サイトのページには、iframe を介して銀行のログイン ページが埋め込まれます (2 つのオリジンは異なります)。送信元の制限がない場合、悪意のある Web ページの JavaScript スクリプトは、ユーザーはユーザー名とパスワードで銀行にログインします。
ブラウザでは、<script>、<img src="/static/imghwm/default1.png" data-src="http://localhost:8081/test2.html" class="lazy" alt="JavaScript オリジン ポリシーとクロスドメイン アクセスの概要" >、<iframe>、<link> などのタグは、同じオリジンによる制限を受けることなくクロスドメイン リソースを読み込むことができますが、ブラウザは JavaScript の権限を制限します。ロードされたコンテンツを読み書きできないようにします。 </script>
さらに、同一オリジンポリシーは Web ページの HTML ドキュメントのみを制限し、JavaScript、CSS、画像などの他の読み込まれた静的リソースは依然として同じオリジンに属しているとみなされます。
コード例 (http://localhost:8080/ と http://localhost:8081 はポートが異なるため、生成元が異なります):
http://localhost:8080/test.html
<html>
<head><title>test same origin policy</title></head>
<body>
<iframe id="test" ></iframe>
<script type="text/javascript">
document.getElementById("test").contentDocument.body.innerHTML = "write somthing";
</script>
</body>
</html>
http ://localhost:8081/test2.html
<html>
<head><title>test same origin policy</title></head>
<body>
Testing.
</body>
</html>
Firefox で次のエラーが表示されます:
エラー: プロパティ 'body' へのアクセス許可が拒否されました
Document オブジェクトのドメイン属性ロードされたドキュメントを保存します。サーバーのホスト名を設定できます。
たとえば、「blog.php.cn」と「bbs.php.cn」のページの両方が document.domain を「php.cn」に設定している場合、2 つのサブドメインのスクリプトは相互にアクセスできます。
セキュリティ上の理由から、//www.php.cn/ を sina.com に設定することはできません
2. Ajax クロスドメイン
Ajax (XMLHttpRequest)リクエストには同じソース ポリシー制限が適用されます。
Ajax は XMLHttpRequest を通じてリモート サーバーと対話できます。また、XMLHttpRequest は純粋な Javascript オブジェクトであり、この対話プロセスはバックグラウンドで実行されるため、ユーザーは気づきにくいです。
したがって、XMLHTTP は実際に元の Javascript のセキュリティ制限を突破しました。
例:
Web サイトが他のサイトの JavaScript を参照しているとします。このサイトは侵害され、ユーザー入力を取得し、ajax 経由で他のサイトに送信するために JavaScript に追加され、情報が継続的に収集されるとします。
または、Web サイトに脆弱性があり、XSS に JavaScript スクリプトが挿入される可能性があります。このスクリプトは、ajax を通じてユーザー情報を取得し、ajax を通じて他のサイトに情報を送信することで、情報を継続的に収集できます。
XMLHTTP のリフレッシュ不要の非同期対話機能を利用したいが、JavaScript のセキュリティ ポリシーを公然と突破したくない場合、別の方法は、厳格な同一オリジン制限を XMLHTTP に追加することです。
このセキュリティ ポリシーは、アプレットのセキュリティ ポリシーと非常によく似ています。 IFrame の制限は、クロスドメイン HTML DOM 内のデータにアクセスできないことですが、XMLHTTP は基本的にクロスドメイン リクエストの送信を制限します。 (実際、CORS が制限を緩和したことについては後述します)
Ajax テクノロジーとネットワーク サービスの発展に伴い、クロスドメインの要件はますます強くなっています。ここでは、Ajax のクロスドメイン技術について紹介します。
2.1 JSONP
JSONP テクノロジーは実際には Ajax とは何の関係もありません。 <script> タグはクロスドメイン JavaScript スクリプトをロードでき、ロードされたスクリプトと現在のドキュメントは同じドメインに属していることがわかっています。したがって、スクリプト内のデータと関数はドキュメント内で呼び出したりアクセスしたりできます。 JavaScript スクリプト内のデータが動的に生成される場合、ドキュメント内に <script> タグを動的に作成することで、サーバーとのデータ対話を実現できます。 </script>
JSONP は、<script> タグのクロスドメイン機能を使用してクロスドメイン データ アクセスを実現し、コールバック関数名をパラメータとして動的に生成された JavaScript スクリプトを要求します。このうちコールバック関数は、サーバー側で動的に生成されるスクリプトによってデータが生成され、生成されたデータをパラメータとしてコード内で呼び出されるローカルドキュメントのJavaScript関数です。このスクリプトがローカル ドキュメントにロードされると、コールバック関数が呼び出されます。 </script>
最初のサイトのテストページ (http://localhost:8080/test.html):
<script src="http://localhost:8081/test_data.js">
<script>
function test_handler(data) {
console.log(data);
}
</script>
服务器端的Javascript脚本（http://localhost:8081/test_data.js）：
test_handler('{"data": "something"}');
为了动态实现JSONP请求，可以使用Javascript动态插入<script>标签：</script>
<script type="text/javascript">
// this shows dynamic script insertion
var script = document.createElement('script');
script.setAttribute('src', url);
// load the script
document.getElementsByTagName('head')[0].appendChild(script);
</script>
JSONP协议封装了上述步骤，jQuery中统一是现在AJAX中(其中data type为JSONP)：
http://localhost:8080/test?callback=test_handler
为了支持JSONP协议，服务器端必须提供特别的支持[2]，另外JSONP只支持GET请求。
2.2 Proxy
使用代理方式跨域更加直接，因为SOP的限制是浏览器实现的。如果请求不是从浏览器发起的，就不存在跨域问题了。
使用本方法跨域步骤如下：
1. 把访问其它域的请求替换为本域的请求
2. 本域的请求是服务器端的动态脚本负责转发实际的请求
各种服务器的Reverse Proxy功能都可以非常方便的实现请求的转发，如Apache httpd + mod_proxy。
Eg.
为了通过Ajax从http://localhost:8080访问http://localhost:8081/api，可以将请求发往http://localhost:8080/api。
然后利用Apache Web服务器的Reverse Proxy功能做如下配置：
ProxyPass /api http://localhost:8081/api
2.3 CORS
2.3.1 Cross origin resource sharing
“Cross-origin resource sharing (CORS) is a mechanism that allows a web page to make XMLHttpRequests to another domain. Such "cross-domain" requests would otherwise be forbidden by web browsers, per the same origin security policy. CORS defines a way in which the browser and the server can interact to determine whether or not to allow the cross-origin request. It is more powerful than only allowing same-origin requests, but it is more secure than simply allowing all such cross-origin requests.” ----Wikipedia[3]
通过在HTTP Header中加入扩展字段，服务器在相应网页头部加入字段表示允许访问的domain和HTTP method，客户端检查自己的域是否在允许列表中，决定是否处理响应。
实现的基础是JavaScript不能够操作HTTP Header。某些浏览器插件实际上是具有这个能力的。
服务器端在HTTP的响应头中加入（页面层次的控制模式）：
Access-Control-Allow-Origin: example.com Access-Control-Request-Method: GET, POST Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin Access-Control-Expose-Headers: Content-Range Access-Control-Max-Age: 3600
多个域名之间用逗号分隔，表示对所示域名提供跨域访问权限。"*"表示允许所有域名的跨域访问。
客户端可以有两种行为：
1. 发送OPTIONS请求，请求Access-Control信息。如果自己的域名在允许的访问列表中，则发送真正的请求，否则放弃请求发送。
2. 直接发送请求，然后检查response的Access-Control信息，如果自己的域名在允许的访问列表中，则读取response body，否则放弃。
本质上服务端的response内容已经到达本地，JavaScript决定是否要去读取。
Support: [Javascript Web Applications]
* IE >= 8 (需要安装caveat)
* Firefox >= 3
* Safari 完全支持
* Chrome 完全支持
* Opera 不支持
2.3.2 测试
测试页面http://localhost:8080/test3.html使用jquery发送Ajax请求。
<html>
<head><title>testing cross sop</title></head>
<body>
Testing.
<script src="jquery-2.0.0.min.js"></script>
<script type='text/javascript'>
$.ajax({
url: 'http://localhost:8000/hello',
success: function(data) {
alert(data);
},
error: function() {
alert('error');
}
});
</script>
</body>
</html>
测试Restful API(http://localhost:8000/hello/{name})使用bottle.py来host。
from bottle import route, run, response @route('/hello') def index(): return 'Hello World.' run(host='localhost', port=8000)
测试1：
测试正常的跨域请求的行为。
测试结果：
1. 跨域GET请求已经发出，请求header中带有
Origin http://localhost:8080
2. 服务器端正确给出response
3. Javascript拒绝读取数据，在firebug中发现reponse为空，并且触发error回调
测试2：
测试支持CORS的服务器的跨域请求行为。
对Restful API做如下改动，在response中加入header：
def index():
#Add CORS header#
response.set_header("Access-Control-Allow-Origin", "http://localhost:8080")
return 'Hello World.'
测试结果：
1. 跨域GET请求已经发出，请求header中带有
Origin http://localhost:8080
2. 服务器端正确给出response
3. 客户端正常获取数据
测试3：
测试OPTIONS请求获取CORS信息。
对客户端的Ajax请求增加header：
$.ajax({
url: 'http://localhost:8000/hello',
headers: {'Content-Type': 'text/html'},
success: function(data) {
alert(data);
},
error: function() {
alert('error');
}
});
对Restful API做如下改动：
@route('/hello', method = ['OPTIONS', 'GET'])
def index():
if request.method == 'OPTIONS':
return ''
return 'Hello World.'
测试结果：
1. Ajax函数会首先发送OPTIONS请求
2. 针对OPTIONS请求服务器
3. 客户端发现没有CORS header后不会发送GET请求
测试4：
增加服务器端对OPTIONS方法的处理。
对Restful API做如下改动：
@route('/hello', method = ['OPTIONS', 'GET'])
def index():
response.headers['Access-Control-Allow-Origin'] = 'http://localhost:8080'
response.headers['Access-Control-Allow-Methods'] = 'GET, OPTIONS'
response.headers['Access-Control-Allow-Headers'] = 'Origin, Accept, Content-Type'
if request.method == 'OPTIONS':
return ''
return 'Hello World.'
测试结果：
1. Ajax函数会首先发送OPTIONS请求
2. 针对OPTIONS请求服务器
3. 客户端匹配CORS header中的allow headers and orgin后会正确发送GET请求并获取结果
测试发现，Access-Control-Allow-Headers是必须的。
CORS协议提升了Ajax的跨域能力，但也增加了风险。一旦网站被注入脚本或XSS攻击，将非常方便的获取用户信息并悄悄传递出去。
4. Cookie 同源策略
Cookie中的同源只关注域名，忽略协议和端口。所以https://localhost:8080/和http://localhost:8081/的Cookie是共享的。
5. Flash/SilverLight跨域
浏览器的各种插件也存在跨域需求。通常是通过在服务器配置crossdomain.xml[4]，设置本服务允许哪些域名的跨域访问。
客户端会首先请求此文件，如果发现自己的域名在访问列表里，就发起真正的请求，否则不发送请求。
<?xml version="1.0"?> <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"> <cross-domain-policy> <allow-access-from domain="*"/> <allow-http-request-headers-from domain="*" headers="*"/> </cross-domain-policy>
通常crossdomain.xml放置在网站根目录。
6. 总结
互联网的发展催生了跨域访问的需求，各种跨域方法和协议满足了需求但也增加了各种风险。尤其是XSS和CSRF等攻击的盛行也得益于此。
了解这些技术背景有助于在实际项目中熟练应用并规避各种安全风险。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
Javascript实现商品秒杀倒计时（时间与服务器时间同步）的解析
以上がJavaScript オリジン ポリシーとクロスドメイン アクセスの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AMPythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。
C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AMC/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。
JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AMさまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。
ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。
next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか？ マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます
next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AMこの記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します
JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AMJavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。
JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AMJavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SublimeText3 中国語版
中国語版、とても使いやすい
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
Dreamweaver Mac版
ビジュアル Web 開発ツール
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
