How to safely load external sources in html
Question
I am a beginner in Web Developing. I created a login webpage which loads external sources.
Here's my code:
<!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>
As you can see the sources are http. If I load the web page this time. A shield icon will appear on the upper right corner of the browser asking if I need to load unsafe scripts
When I press load unsafe scripts, the web page will appear like this
I tried to change the http to https. But the the web page loaded is still like the one above.
2 answers
solution1
0 2017-06-29 03:57:42
There's nothing inherently unsafe with anything you've done. Your browser is just throwing up that warning as an alert for non computer-savvy people that a website might be trying to do something nefarious... "this page" referring to locahost.
That said, there are ubiquitous bugs with escaping HTML and such that makes it possible for people to inject their own scripts. You can read up on it and make sure to be a responsible web developer, or just use a framework which if it's worth its salt would handle this for you in the most sensible ways tried and tested by the community.
Until then, let me point you towards RequireJS . It's a JavaScript plugin that manages JavaScript files like modules.
solution2
-1 2017-06-29 04:07:57
您可以尝试在本地下载它们并加载它们，就像您对那里的大多数脚本所做的一样。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.