Maybe I'm just losing my mind here, but I keep getting mixed content warnings for this page:
<!doctype html>
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<iframe scrolling="no" id="slides" src="admin/slides.html"></iframe>
<iframe scrolling="no" id="sidebar" src="/sidebar"></iframe>
<iframe scrolling="no" id="ticker" src="/clock2"></iframe>
</body>
</html>
It's confusing me greatly, since everything is on the same domain, and all pages are served over https. To add to the confusion, the first iframe actually works without a warning, the second two don't. Also, the second two pages work just fine over https when you go to them directly. They don't even exist on http - my .htaccess redirects to https. All the resources are loaded over https. I've even tried using the fqdn with the https prefix in the src instead of a relative reference, but it doesn't help.
What am I missing?
I'm not quite sure why it happends, but the redirect from /sidebar to /sidebar/(index.html) is going over HTTP. I'm pretty sure replacing the links with /sidebar/index.html or just /sidebar/ would resolve your issue.
I just tested it, here's a screenshot of the links /sidebar/ and /clock2/ loading over https. http://puu.sh/nzsnu/b421dfb4bd.png
Related
I have a page with iframe, to simplify this case lets assume that it looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe src="http://example.com"></iframe>
</body>
</html>
Assume that the page is on the Internet and you enter it. It loads http://example.com inside the iframe.
I want to change this so that you couldn't see the http://example.com because you can open this adress only using my page not just putting http://example.com in second tab of webbrowser.
I see http://example.com in page source (right click -> page source)
I also see in the network in developer tools that the browser makes request to http://example.com. So I just can copy this address and open it in new webbrowser tab.
What should I do to make it impossible for you to know the address: http://example.com
The only way I can think of is if you screen scrape the page in your code and serve up the html yourself. So it would look like this:
Someone makes a request to your page
Before you serve the page in your back end code you grab the html on
example.com
Serve up the html that comes out of the back end request
This may not be formatted properly though because you are missing css or lose functionality because you are missing js but you just need to make sure you include that stuff.
An IFrame is client-side.
This means for the browser to render the IFrame, it must be visible to the client web-browser.
The only way to hide it is for you to develop a web proxy.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe src="grab_secret_site.php"></iframe>
</body>
</html>
Here, the code within grab_secret_site.php would make an HTTP request to http://example.com to grab the HTML. An example here. However, bear in mind that any resources won't load unless you rewrite them.
e.g.
<img src=icon.jpg />
Will point to icon.jpg on your site, not on example.com.
If you don't want the page to be loaded without the parent frame, you could create a session variable (e.g. PHP session) in the outer page, which is then checked within the IFrame. If it doesn't exist, redirect the user back to the outer page.
There is a header - X-Frame-Options that allows you to block opening page in iframe, but in this way I think It's impossible.
I am new to AngularJS.
I want to include reusable html in the main html. When I try to redo this example, it fails. Currently I have myUsers_List.htm, myUsers_Form.htm, myUsers.js, and main.html all in one folder.
The code in main.html is as follow:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container">
<div ng-include="'myUsers_List.htm'"></div>
<div ng-include="'myUsers_Form.htm'"></div>
</div>
<script src= "myUsers.js"></script>
</body>
</html>
I can see the content in myUsers_List.htm and myUsers_Form.htm when I open main.html in Dreamweaver, but when I open it in browser, it's blank.
Could someone help me out the problem about that? Is is about the path of files or some other issue? Thanks.
When I try to check it out in the Chrome JavaScript debugger to see whether there is any error.
Since your error is
XMLHttpRequest cannot load file:///C:/Users/Desktop/New%20folder/myUsers_List.htm. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
It seems that you need to run your angular app from a web server instead of trying it locally.
You need to either run your project under a webserver, xampp is simple to setup.
You could perhaps download angularjs and bootstrap and serve them locally from the file system, at the minute you're using a cdn.
Also, just an observation, you're missing your tag, on mobile so can't test if that'd cause any issues.
I've tried including it in my files, and from a CDN. I followed a tutorial about it, although it's hardly a tutorial to follow since all i had to do was include the link after <head>. Still, it's not being recognized and plugins aren't being recognized and just appear as text. Does anyone have an idea what could be the problem? If it's perhaps a setting in dreamweaver that has to be changed?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="myfirststylesheet.css" rel="stylesheet" type="text/css">
<title>Hallo wereld</title>
</head>
</html>
Its worth noting that, http or https in src hinders the inclusion of the cdn files at times.Remove the protocol and try this way....this way, it would take either http or https depending on the nature of hosting server
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
EDIT
Further Read on why this helps ( if not running the file from computer but through some server, even localhost):
Can I change all my http:// links to just //?
http-and-https-with-google-cdn
I am getting this error on a website I'm working on, I have simplified the code down to the below example, which produces this error in webkit (chrome 15.0.x), I don't see the error in firefox.
I have looked around at other SO posts regarding the same error and most of them are in reference to using the youtube API and cross domain references.
I have tried:
changing the doctype, (no difference)
adding origin params to the youtube call (no difference)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title></title>
</head>
<body class="page front logged-in no-sidebars">
<iframe width="393" height="230" src="http://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" ></iframe>
</body>
</html>
This is a common issue with cross-site messaging (where one page/website communicates with another page/website via an IFrame using javascript callbacks as a medium). It doesn't always work out and some browsers may not always catch the callback event and may register it as a security error if the protocol or port differs.
I am using the new cache manifest functionality from HTML5 to cache my web app so it will work offline. The content is cached automatically when the page is loaded with the following html element:
<html lang="en" manifest="offline.manifest">
This works fine. However, I want to give my users the option of whether they want the content cached offline. So, here is my question:
Is there any way to trigger that an application be cached at runtime, using JavaScript, and not have it automatically done when the page is loaded.
For example, something like this (using jquery):
----------------index.html--------------
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="Main.js"></script>
</head>
<body>
<button id="cacheButton">Cache Page</button>
</body>
</html>
---------Main.js---------
$(document).ready(
function()
{
$('#cacheButton').click(onCacheButtonClick);
}
)
function onCacheButtonClick(event)
{
console.log("Setting Offline Manifest");
$('#htmlRoot').attr("manifest","offline.manifest");
}
-------------offline.manifest-------------
CACHE MANIFEST
#version .85
#root
index.html
scripts/main.js
#jquery assets
http://code.jquery.com/jquery-1.4.4.min.js
Basically, when the button is clicked, I dynamically set the manifest attribute of the html element. This works (in the sense the element is set), but it does not cause the browser to then cache the page.
Any suggestions?
You dynamically trigger caching by adding an iframe that points to an empty page containing the actual cache manifest.
offline.html:
<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
<title></title>
</head>
<body>
</body>
</html>
Make sure to add index.html to the cache manifest.
Then just add something like:
<iframe src="offline.html" width="0" height="0">
to document.body dynamically to trigger caching.
After many weeks spent with offline caching, the answer is no, you either cache or don't cache, setting the cache attribute on the client side has no effect.
You could consider offering an alternate url for the caching version, be aware that the page is also implicitly cached as a "master entry".
I am at a loss to understand why you would want to offline cache jquery though, since it is likely to be served with very long expiry anyway.
You may wish to consider offline storage as an alternative. Store the text of the scripts and inject them into the DOM on load. If not cached fetch using Ajax and inject the response, as creating a script tag with the src won't load the script.
Depending on your application, it may be possible to use a modified version of #schibum's approach by breaking down your app into "mini" apps, then caching the sub-sections in an iframe. Consider this example:
index.html
<html manifest="indexx.manifest">
<head>
<script src="jquery-2.1.4.min.js"></script>
<script src="index.js"></script>
<title>Index</title>
</head>
<body>
<ul>
<li>One
<li>Two
<li>Three
</ul>
<iframe id="if" />
</body>
</html>
index.manifest
CACHE MANIFEST
# 3
index.html
jquery-2.1.4.min.js
index.js
index.js
$( document).ready(function() {
var pages = ['1.html','2.html','3.html'];
var LoadNext = function() {
alert(pages[0]);
page = pages.shift();
alert(page)
if ( page !== undefined ) {
console.log("Attempting to load " + page);
$('#if').attr('src', page)
} else {
console.log("All done");
}
};
$('#if').load(function() {
console.log("Finished loading");
LoadNext()
});
LoadNext();
});
1.html
<html manifest="1.manifest">
<head>
<title>One</title>
</head>
<body>
<img src="1.jpg" width="50%">
</body>
</html>
1.manifest
CACHE MANIFEST
# 2
1.html
1.jpg
{2,3}.{html,manifest} follow 1.{html,manifest}'s form.
As a result, each sub-page (1.html, 2.html, 3.html) have their own manifest, and are thus cached independently. index.html has its own (minimal) manifest, so caching that unconditionally is not nearly as network-heavy as caching the entire app. Then the javascript is responsible for pre-loading every page in the iframe so that it gets cached.
Load index.html, then go offline and see how the sub-pages work. too.
An obvious drawback is that any assets shared between pages (e.g. jQuery) must be redundantly cached.
One thing you must remember. Do not cache the manifest file itself. So all you need to do is refresh the page with a different version of the manifest file according for your user selection. You can dynamically generate the manifest file itself, any change to that file will cause a cache refreshment. Best practice to trigger re-caching is to change the version of the manifest file, something like: # ver1 - 01/01/2018 to # ver2 - 02/02/2018 will do the trick.
So you cannot change it in client side but you can do it server side.