MonacaクラウドIDEにて、Onsen UI V2、Angular 1.5にてアプリを開発しております。
コントローラーに画像データをData URI形式で配置し、HTML上に表示する仕組みを記述しているのですが、HTML上に表示した場合、<img src="">なら表示できるのですが、<a href="">でリンク先として設定すると表示できません。
コントローラーから読み込まずに直接Data URIを記述するとリンクが機能します。
Javascript
1var app = angular.module('plunker', []); 2 3app.controller('MainCtrl', function() { 4 this.imgdata='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMg(以下省略)'; 5});
HTML
1<!DOCTYPE html> 2<html ng-app="plunker"> 3 4<head> 5 <meta charset="utf-8" /> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: blob: filesystem:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval' 'unsafe-url'"> 7 <title>AngularJS Plunker</title> 8 <link rel="stylesheet" href="style.css" /> 9 <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script> 10 <script src="app.js"></script> 11</head> 12<body ng-controller="MainCtrl as main"> 13 <p><img src="{{main.imgdata}}"></p> 14 <p><a href="{{main.imgdata}}">link test1</a></p> 15 <p><a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM(以下省略)">link test2</a></p> 16</body> 17</html>
「img src=""」で画像を表示するのは問題なく出来ます。
「link test1」が機能しません。
「link test2」は機能します(IE11では機能しないかもしれません。Chrome、Firefoxでは機能します)
機能しない「link test1」のリンク先を確認すると「unsafe:data:image/png(以下省略)」となり、頭に「unsafe:」という文字列が追加されています。
たぶん、クロスサイトスクリプト関連の警告と思われますが、これを解除する方法はあるのでしょうか。
metaタグの「Content-Security-Policy」に何かを記述すれば解決できるのではないかと思うのですが、具体的にどのように記述したらよいかわかりません。
どなたかわかる方がおりましたらアドバイスお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。