PR

crodova5.1のContent-Security-Policy(CSP)ではまる


前回の引き続きです。

少し前に古いバージョンのcordovaでセキュリティー問題が発生し、googleplayのストアからアプリがリジェクトされるという事件がありました。

そのため、cordovaの開発では、高いバージョンのcordovaで問題をフィックスすることが求められルと思いますが、cordova5で強制になったこのコンテント セキュリティー ポリシー (CSP)はけっこう厄介です。

xss(クロスサイトスクリプティング)など外部からの攻撃に強くなりますが、これまでの古いアプリを対応させるのが面倒・・・。

その面倒な部分ですが、前回作ったGooglemap表示のコードです。  

<html >
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src*;script-src'self' 'unsafe-inline' 'unsafe-eval'*;style-src 'self' 'unsafe-inline';"/>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=true"></script>

    <script type="text/javascript">
        function init() {
            
			var map = document.getElementById("map");
			var options = {
				zoom: 17,
				center: new google.maps.LatLng(35.6904, 139.6999),
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			new google.maps.Map(map, options);
		};
    </script>
</head>
<body onload="init()">
    <div id="map" style="width :100%; height :100%;"></div>
</body>
</html>

この4行目はコンテントセキュリティーポリシーなるもので、Visual Studio 2015がcordovaのバージョンを上げたことに伴い必要になった部分。

 <meta http-equiv="Content-Security-Policy" content="default-src*;script-src'self' 'unsafe-inline' 'unsafe-eval'*;style-src 'self' 'unsafe-inline';"/>

ここをざっくり説明すると、外部への参照はすべてOKという記述です。 せっかくのセキュリティー強化が台無しです。

VS2015をデバッグするとエラーが表示されていると思います。

Unrecognized Content-Security-Policy directive ‘default-src*’.

Unrecognized Content-Security-Policy directive ‘script-src’self”.

Refused to load the stylesheet ‘http://fonts.googleapis.com/css?family=Roboto:300,400,500,700’ because it violates the following Content Security Policy directive: “style-src ‘self’ ‘unsafe-inline'”.

だいたいこんな感じのものが出力されていると思います。

3つ目はCSPに違反するからロードしないということですが、とりあえずGooglemapは表示できます。   ここで、件のコードを以下に書き換えます。

 <meta http-equiv="Content-Security-Policy" content="default-src*;script-src'self' 'unsafe-inline' 'unsafe-eval'*;style-src'self' 'unsafe-inline';"/>

style-srcと’self’の間のスペースを外しただけです。

デバッグするとエラーが、

Refused to load the stylesheet ‘http://fonts.googleapis.com/css?family=Roboto:300,400,500,700’ because it violates the following Content Security Policy directive: “style-src ‘self’ ‘unsafe-inline'”.

から、

Unrecognized Content-Security-Policy directive ‘style-src’self”.

にかわります。

スペース一つだけでCSPが認められなくなりアプリを実行できなくなります。

 

このCSPが認められなくてアプリを実行できない。

ロードしないといわれたが、実際はロードできてアプリも起動する。

また、script-src’self’はスペースがなくてもgooglemapを読み込んでいます。

 

この差は何なのでしょう。   スポンサードリンク