常规跨域的方法
常见跨域的方法有:
添加 Access-Control-Allow-Origin
后台服务器代理
JSONP
1,2 两种方法都是安全可靠的, 3 是不安全不可靠的
JSON 的本质
JSON 本质是引用并执行外部 JavaScript 脚本, 原理是 < scrpit > 标签不受域名的限制, 通过动态创建 < scrpit > 来执行 JS 函数
JSONP 的使用
jQuery 执行 JSONP 使用
- $.Ajax(url,{
- dataType:"jsonp",
- error:function(jqXHR,textStatus,errorThrown)
- {
- //TODO
- },
- success:function(data)
- {
- //TODO
- }
- });
jQuery3.3.1 加载执行外部 JS
- function DOMEval( code, doc, node ) {
- doc = doc || document;
- var i,
- script = doc.createElement( "script" );
- script.text = code;
- if ( node ) {
- for ( i in preservedScriptAttributes ) {
- if ( node[ i ] ) {
- script[ i ] = node[ i ];
- }
- }
- }
- doc.head.appendChild( script ).parentNode.removeChild( script );
- }
不安全
用户输入不可信, 外部脚本同样不可信. 若 A 网站引用了 B 网站的跨域脚本, 那么 A 网站的安全受 B 网站牵制.
安全情况下, safeapi.PHP
- <?PHP
- date_default_timezone_set('asia/shanghai');
- $result=json_encode(array("msg"=>"你好, 当前时间:".date("Y-m-d H:i:s e")));
- if(isset($_REQUEST['callback']))
- {
- header("Content-Type:text/javascript;charset=utf-8");
- echo $_REQUEST['callback']."(".$result.")";
- }else
- {
- header("Content-Type:application/json;charset=utf-8");
- echo $result;
- }
B 网站受到攻击或恶意代码, danger.PHP
- <?PHP
- header("Content-Type:text/javascript;charset=utf-8");
- if(isset($_REQUEST['callback']))
- {
- echo $_REQUEST['callback']."(";
- }else
- {
- echo "_(";
- }
- echo json_encode(array("msg"=>"你好, 当前时间:".date("Y-m-d H:i:s")));
- echo ");console.log('do something');";
在 A 网站下控制台输出 do something
思考
应该对网站安全进行隔离, 不应轻易相信外部脚本, 否则很容易造成账号泄漏等安全风险. 如果的确需要引用执行外部脚本, 可以使用 CSP 策略指令进行白名单控制, 如:
Content-Security-Policy: default-src 'self' trustedscripts.foo.com
来源: https://www.cnblogs.com/loveheihei/p/9882384.html