カメラ機能を使うとエラーが出る

###前提・実現したいこと
MONACAで学ぶ初めてのプログラミングのP.155ページの処理で写真を読み込もうとするとエラーが出る
提供元の完成例で置き換えても同様のエラーが発生する

###発生している問題・エラーメッセージ
Refused to load the image 'content://com.android.providers.media.documents/document/imageXXX'
because it violates the following Content Security Policy directive:
"default-src * data:". Note that 'img-src' was not explicitly set,
so 'default-src' is used as a fallback.

###該当のソースコード

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> // 写真を撮る function takePicture() { var options = { sourceType: Camera.PictureSourceType.CAMERA, // 撮影モード saveToPhotoAlbum: true // 撮影後、写真を端末に保存 };

        // カメラを起動
        navigator.camera.getPicture(onSuccess, onError, options);

        // 撮影完了したときに呼び出される
        function onSuccess(imageURI){
            alert(imageURI + "に保存しました");
        }
        // 撮影キャンセルしたときに呼び出される
        function onError(message){
            alert("エラー: " + message);
        }
    }
    
    // 写真を見る
    function loadPicture() {
        var options = {
            sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM   // 読込モード
        };
          
        // 写真を読み込む
        navigator.camera.getPicture(onSuccess, onError, options);
        
        // 読込完了したときに呼び出される
        function onSuccess(imageURI){
            document.getElementById("photo").src = imageURI;
        }
        
        // 読込失敗したときに呼び出される
        function onError(message){
            alert("エラー: " + message);
        }
    }
</script>

</head> <body> <div id="buttons"> <button onclick="takePicture()">写真を撮る</button> <button onclick="loadPicture()">写真を見る</button> </div> <img id="photo" src=""> </body> </html>

行動規範の内容に同意します

回答1件

ベストアンサー

content:スキームでエラーが出ているようなので、CSPの設定を次のように修正してみてください

修正前：

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

修正後

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

正確には、default-srcでなくimage-srcに入れる方が良いのですが、とりあえずこれで動作すると思います。

投稿2017/12/27 02:39