Question

我是Web开发的初学者。我创建了一个加载外部源的登录网页。

这是我的代码：

<!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>

正如您所看到的，源代码是http。如果我这次加载网页。浏览器右上角会出现一个盾牌图标，询问我是否需要加载不安全的脚本

当我按下加载不安全脚本时，网页将显示为

我尝试将http更改为https。但加载的网页仍然如上所述。

Answer 1

对于你所做过的事情，没有什么本质上不安全的。你的浏览器只是提醒那个警告，警告非精通电脑的人，网站可能会试图做一些邪恶的事情......＆＃34;这个页面＆＃34;提到locahost。

也就是说，存在无处不在的错误，这些错误会导致人们注入自己的脚本。您可以阅读它并确保成为一个负责任的Web开发人员，或者只是使用一个框架，如果它能够以最合理的方式为您处理这个问题，那么社区就会尝试和测试。

在此之前，让我指出RequireJS。它是一个管理JavaScript文件的JavaScript插件。

Answer 2

您可以尝试在本地下载并加载它们，就像您在那里为大多数脚本所做的那样。

如何在html中安全加载外部源代码

2 个答案: