我是Web開發人員的初學者。我創建了一個加載外部源的登錄網頁。如何在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?  </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。但是加載的網頁仍然像上面那樣。
您是否嘗試使用https而不是http加載您的外部文件?我認爲它會解決你的問題 – Kiwad
我認爲加載37個簡單登錄頁面的腳本讓你的瀏覽器感到緊張。 :) –
@BrianPeacock我同意。感謝您指出了這一點。 –