安全にhtmlの外部ソースを読み込む方法

私はWeb Developingの初心者です。私は、外部ソースを読み込むログインWebページを作成しました。あなたはソースがHTTPをしている見ることができるように安全にhtmlの外部ソースを読み込む方法

<!DOCTYPE html> 
<html> 
    <head> 
    <title> 
     Login 
    </title> 

    <link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700" media="all" rel="stylesheet" type="text/css" /> 
    <link href="stylesheets/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" /> 
    <link href="stylesheets/font-awesome.css" media="all" rel="stylesheet" type="text/css" /> 
    <link href="stylesheets/se7en-font.css" media="all" rel="stylesheet" type="text/css" /> 
    <link href="stylesheets/style.css" media="all" rel="stylesheet" type="text/css" /> 

    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script> 
    <script src="javascripts/bootstrap.min.js" type="text/javascript"></script> 
    <script src="javascripts/raphael.min.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.mousewheel.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.vmap.min.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.vmap.sampledata.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.vmap.world.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.bootstrap.wizard.js" type="text/javascript"></script> 
    <script src="javascripts/fullcalendar.min.js" type="text/javascript"></script> 
    <script src="javascripts/gcal.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.dataTables.min.js" type="text/javascript"></script> 
    <script src="javascripts/datatable-editable.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.easy-pie-chart.js" type="text/javascript"></script> 
    <script src="javascripts/excanvas.min.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.isotope.min.js" type="text/javascript"></script> 
    <script src="javascripts/masonry.min.js" type="text/javascript"></script> 
    <script src="javascripts/modernizr.custom.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.fancybox.pack.js" type="text/javascript"></script> 
    <script src="javascripts/select2.js" type="text/javascript"></script> 
    <script src="javascripts/styleswitcher.js" type="text/javascript"></script> 
    <script src="javascripts/wysiwyg.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.inputmask.min.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.validate.js" type="text/javascript"></script> 
    <script src="javascripts/bootstrap-fileupload.js" type="text/javascript"></script> 
    <script src="javascripts/bootstrap-datepicker.js" type="text/javascript"></script> 
    <script src="javascripts/bootstrap-timepicker.js" type="text/javascript"></script> 
    <script src="javascripts/bootstrap-colorpicker.js" type="text/javascript"></script> 
    <script src="javascripts/bootstrap-switch.min.js" type="text/javascript"></script> 
    <script src="javascripts/daterange-picker.js" type="text/javascript"></script> 
    <script src="javascripts/date.js" type="text/javascript"></script> 
    <script src="javascripts/morris.min.js" type="text/javascript"></script> 
    <script src="javascripts/skycons.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.sparkline.min.js" type="text/javascript"></script> 
    <script src="javascripts/fitvids.js" type="text/javascript"></script> 
    <script src="javascripts/main.js" type="text/javascript"></script> 
    <script src="javascripts/respond.js" type="text/javascript"></script> 

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> 
    </head> 
    <body class="login3"> 

    <!-- Login Screen --> 
    <div class="login-wrapper"> 
     <div class="login-container"> 

     <!-- <a href="./"><img width="230" height="45" src="images/img_wowlamp_login.png" /></a> --> 
     <img width="230" height="45" src="images/img_wowlamp_login.png" /> 

     <form action="login.html" method="post"> 

      <div class="form-group"> 
      <input class="form-control" placeholder="User Name" type="text" name="user"> 
      </div> 

      <div class="form-group"> 
      <input class="form-control" placeholder="Password" type="text" name="password"> 
      </div> 

      </br> 

      <font size="2" color="#0000ff"><a href="./"><script>getParameterByName('test')</script></a></font> 

      <div class="form-group"> 
       <input class="btn btn-lg btn-primary btn-block" style="margin-top:30px" type="submit" value="Log in"> 
      </div> 

     </form> 

     <!-- <font size="2"><font color="#fffff">No account yet?&nbsp&nbsp</font><a href="./"><font color="#FF3838">Sign up here!</font></a></font> --> 

     </div> <!-- login-wrapper --> 
    </div> <!-- login-container --> 
    <!-- End Login Screen --> 

    </body> 
</html>

：

は、ここに私のコードです。今回は、Webページをロードする場合。私は危険なスクリプト

をロードする必要がある場合は、シールドアイコンが尋ねるブラウザの右上に表示されます、私は負荷危険なスクリプトを押すと、Webページは、この

のように表示されます

httpをhttpsに変更しようとしました。しかし、ロードされたWebページは、上記のようなものです。

出典

2017-06-29 final static

外部ファイルをhttpではなくhttpsでロードしようとしましたか？私はそれがあなたの問題を解決するだろうと思う – Kiwad

私は、単純なログインページの37のスクリプトを読み込むことがあなたのブラウザを緊張させたと思う。 :) –

@BrianPeacock私は同意します。それを指摘してくれてありがとう。 –

あなたが行ったことで本質的に危険なことは何もありません。あなたのブラウザは、ウェブサイトが何か悪いことをしようとしている可能性があるコンピュータに精通していない人々のための警告として警告を投げているだけです... "このページ"はlocahostを参照しています。

つまり、HTMLをエスケープするためのユビキタスなバグがあるため、人々が独自のスクリプトを挿入することが可能です。あなたはそれを読んで責任あるWeb開発者であることを確かめることができます。もしそれが塩分の価値があるなら、コミュニティによって試され、テストされた最も賢明な方法でこれを処理するフレームワークを使用してください。

それまでは、RequireJSに向かいましょう。モジュールのようなJavaScriptファイルを管理するJavaScriptプラグインです。

出典

2017-06-29 03:57:42 JackHasaKeyboard

-1

ローカルでダウンロードして、ほとんどのスクリプトのようにロードすることができます。

出典

2017-06-29 04:07:57

安全にhtmlの外部ソースを読み込む方法

答えて

関連する問題