javascript
  • jquery
  • twitter-bootstrap
  • cross-domain
  • xss
  • 2017-08-31 1 views 0 likes 
    0

    一時的に、ブラウザのコンソールでJavascriptを使用してカスタマイズを行うために、インターネット上のweb page(自分のウェブサイトではない)にブートストラップのCSSファイルをロードします。 JavascriptでCDNから外部CSSファイルを読み込む方法は?

    は、私はこのようにjQueryを使用してCDNからブートストラップをロードしようとした:

    $("head").append("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' type='text/css' />"); 
    

    私は、このエラーメッセージが表示されますことをやって:

    error message

    私は正常にそれをロードするために何をすべきかページに?ここで

    +0

    チェックhttps://stackoverflow.com/questions/27323631/how-to-override-content-security-policy-while-including-script-in-browser-js-con –

    答えて

    0

    あなたが行く:デベロッパーツールのコード上記

    var mySheet = document.createElement('link');mySheet.type='text/css';mySheet.rel='stylesheet';mySheet.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';document.getElementsByTagName('head')[0].appendChild(mySheet); 
    

    貼り付け - >コンソール、Enterキーを押すと、あなたが行ってもいいです。ここ

    主な点は、これは私のために、最初にHTMLタグを作成してプロパティでそれを埋めるとDOMの

    0

    に追加する働いている:

    var head = document.head; 
    var link = document.createElement('link'); 
    
    
    
    link.type = 'text/css'; 
    
    
    link.rel = 'stylesheet'; 
    
    
    link.href = fileName/url; 
    
    
    
    head.appendChild(link); 
    
    1

    をjsの観点からのアプローチが正しいです。別のサイトからスクリプトをロードしようとしましたが、これをコンテンツセキュリティポリシー(CSP)で制限しているため、できません。 CSPメタタグを確認してください。どのようにの詳細な説明と

    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval'"> 
    

    チェックthis answer

    は、私はあなたがこれを使用することができ、エラーがまだを表示された場合、それはin this MDN article.

    は、単純に、テストのために、すべてのを許可するにはについてあなたがより多くを読むことをお勧めこのタグは動作します

    私はこの作品:

    function loadCss(filename) { 
     
        var cssNode = document.createElement("link"); 
     
        cssNode.setAttribute("rel", "stylesheet"); 
     
        cssNode.setAttribute("type", "text/css"); 
     
        cssNode.setAttribute("href", filename); 
     
        document.getElementsByTagName("head")[0].appendChild(cssNode); 
     
    } 
     
    
     
    loadCss("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css")

    関連する問題