There is a way to put external images in a-frame? - dropbox

my problem is, i am not able to put any file from dropbox in a-frame
i have try this
<a-assets>
<img id="penguin" src="https://www.dropbox.com/s/lqnqf1ae7ygy3yh/4241745025010902126.JPG">
</a-assets>
than i try this
<a-assets>
<img id="penguin" src="src: url(https://www.dropbox.com/s/lqnqf1ae7ygy3yh/4241745025010902126.JPG)">
</a-assets>
than i try this
<a-assets>
<img id="penguin" src="https://www.dropbox.com/s/lqnqf1ae7ygy3yh/4241745025010902126.JPG" crossorigin="anonymous">
</a-assets>
than i try this
<a-assets>
<img id="penguin" src="src: url(https://www.dropbox.com/s/lqnqf1ae7ygy3yh/4241745025010902126.JPG)" crossorigin="anonymous">
</a-assets>
than NO ONE IS. WORKING! WHY?

a-assets expect URL's so they don't know what to do with the url() syntax . Unfortunately the console log isn't that clear - uncaught exception: Object.
But when you provide a link, like in the 1st and 3rd option, you get a more helpful log: Cross-Origin Request Blocked: (...) - which leads us to a conclusion - it's a CORS issue.
I found some info, that only direct links support CORS. All you need is to change dropbox.com to dl.dropboxusercontent.com:
// normal link
https://www.dropbox.com/s/lqnqf1ae7ygy3yh/4241745025010902126.JPG
// direct link
https://www.dl.dropboxusercontent.com/s/lqnqf1ae7ygy3yh/4241745025010902126.JPG
Knowing this, we can try it in a-frame. And it seems to be working.
As Greg noted, this method is not officially supported, and you probably should serve your images in a different way:
On github / github pages.
On a server which is able to server the asset with a CORS header
On any server where the website is hosted (so they are under the same domain)

Related

HTML Functions not working under SSL

I'm having trouble with my website and some background music using Youtube Embed snippet.
When I connect without SSL everything works fine, from JS to YT snippets.
But when I use SSL, YT snippet doesn't work.
<embed height="1" src="http://www.youtube.com/v/-hIbRH1qcjU?autoplay=1" type="application/x-shockwave-flash" width="1" wmode="transparent">
Any ideas on how to solve this ?
If you view the browser console you'll probably see a message about mixed content. You're including content that is http on a https site.
Just change the Youtube URL to be https and not http and I suspect it will work.

Can't access iframe of different origin in the parent jsp

Quick example for the kind of functionality required (just for exampple):
http://www.indeed.hk/cmp/Calvin-Klein-Jeans-&-Calvin-Klein-Underwear/jobs/Part-Time-Sales-Associate-1643e24903d9f4c7
If you click on apply-now button, it shows an iframe.
I am having a project where I am trying to access an iframe of different origin, say https: //subdomain.example.com, on a jsp page of origin say http://www.example.com but it gives me the following error:
Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin http://www.example.com from accessing a frame with origin https://subdomain.example.com. The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.
Lets call the parent jsp page as parent.jsp, and the iframe jsp as iframe.jsp.
parent.jsp is on server S, and the project name is xyznet
iframe.jsp is on server R, and the project name is xyz
Here is a piece of code from the parent.jsp
<%
java.util.Map model = (java.util.Map)pageContext.findAttribute("model");
%>
<html>
<body>
<h1> This is the parent page
<iframe id="quick-apply-frame" name="iframe-name" src=" <%=https: //sub.domain.com/apply.html?ref=${model.x.y}" onload="quickSetParams();">
</iframe>
<script>
function quickSetParams() {
$("[name=iframe-name]").contents().find("[name=iframe-param-name]").val(${model.value1}');
}
</body>
</html>
And here is piece of code from the iframe.jsp
<html>
<body>
<form action="xyz.html">
<input name="iframe-parm-name" value=""/>
<input name="iframe-parm-name2" value="${model.parm2}" />
</form>
</body>
</html>
Handler which loads the iframe.jsp is a SimpleFormController, located on server R
I have come across some solutions where the data is transferred directly using javascript, but I need a handler for this, and so, a direct javascript redirect or nesting of iframes would not work for me
Thanks James for some leads. I finally got it working!
I still dont completely understand how it works, but here is what I did:
I dont load the iframe.jsp (located in https: //sub.domain.com) at the same time as the parent.jsp is loaded. Means, the src of the iframe is not set initially.
Instead, I call a javascript function to load the iframe once the "showIframe" button in the parent is clicked. I got a suggestion from someone that to crack cross domain security issue, you have to set the src of the iframe via javascript after the page loads.
Some more pointers other can explore is CORS, where you add a parameter like this in your ssl.conf or httpd.conf (apache configuration)
Header set Access-Control-Allow-Origin "http://www.domain.com" . It basically grants permission to access to the domain mentioned

Getting Rally API key to work outside of rally App

I have seen this question and response, but it still does not work for us:
Embedding Apps with API key
We are having a problem with the Rally API. Our intent is to make a stand-alone page (outside of Rally) that shows the portfolio Kanban.
I have attached the test page. It was created with the rally-app-builder. We created an API key. When we try to load the page, passing the API key, we get a json exception about cross-site violations. The documentation says that we will see this error if we don't pass the key. But even when we do pass it, the error persists.
We have tried it through an apache server, so the issue about being a standalone file is not our problem. Does anyone have any other ideas?
The html page is below.
<!DOCTYPE html>
<html>
<head>
<title>helloworld</title>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0rc3/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
Ext.define("CustomApp",{extend:"Rally.app.App",componentCls:"app",items:{html:'App SDK 2.0rc3 Docs'},launch:function(){this.add({xtype:"rallycardboard",types:["Portfolio Item/Feature"],attribute:"State",storeConfig:{context:{project:"/project/14292239482",projectScopeUp:!1,projectScopeDown:!0}},context:this.getContext(),readOnly:!0})}});
Rally.launchApp('CustomApp', {
name:"helloworld",
parentRepos:""
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
The api key we generated is of type alm-wsapi-read-only. When page is loaded, even with apikey parameter provided, we get the JSON x-site error.
We are wondering if there is a config to change on Rally subscription side or perhaps there is an error in the documentation or something else simple.
I submitted a defect. It works up to the point when I load an App-debug.html using rally-app-builder run command:
rab run
and append apiKey to the app's URL as a query parameter. It loads fine using the apiKey:
The problem starts when I choose a different server to load an embedded app, for example:
a)start a simple http python or node server in another directory
b)copy App-external.html from deploy folder to the directory from which the server is running
c)create a new file, App-embedded.html in this directory :
<html>
<header>
<title>Embedded app test: revs</title>
</header>
<body>
<iframe src="http://localhost:9000/App-external.html?apiKey=_Ib4u6d7"></iframe>
</body>
</html>
d)load App-embedded.html
These steps results in cross-origin error.
If you check in Chrome's Network tab, or Safari debugger it shows that artifact (hierarchicalrequirement or defect) requests fails. Interestingly, the preceding subscription, user and schema requests complete successfully. Screenshot from Safari:
It turns out that the underlying issues were related to the CORS configuration on the Rally servers, not anything specific with App SDK 2.0rc3. As of 11/24/14 this issue should be resolved.

Amazon widget and SSL

I'm trying to embed an Amazon "Recommended Product" widget into a website. We use SSL across all pages on the site.
Unfortunately, the Amazon widget by default is embedded using a simple IFrame and although the source for the IFrame can be https://, the images and links within the IFrame are always http://
IFrame sample code
<iframe src="https://rcm-uk.amazon.co.uk/e/cm?t=june2k&o=2&p=16&l=st1&mode=books-uk&search=potter&f=ifr&f=ifr"
width="468"
height="336"
border="0"
frameborder="0"
style="border:none"
marginwidth="0"
marginheight="0"
scrolling="no"></iframe>
Needless to say this results in "insecure content" warnings, broken padlocks, etc.
So far the only solution I've been able to come up with is to get the contents of the IFrame using the server, parse it and re-write all the image links to point at a local handler which in turn proxies the images. It seems like a fragile approach with a lot of processing overhead. It's just nasty.
Does anyone have any experience with this? Is there a method here that I'm missing? Can I get Amazon to return valid https:// urls?
If I change the image urls from http to https in-situ, I get a certificate mis-match error - it seems the images are served from the Akamai CDN and the common name for the certificate isn't the hostname used to serve the images.
I'm finding it hard to believe that an e-commerce company as large as Amazon is incapable of serving a secure page.
Any help greatly appreciated.
After a lot of digging, I found a version of the widget on the Amazon site which ran in SSL mode without errors.
After looking at the IFrame src, the URL has an additional parameter internal=1. I haven't seen this documented anywhere but it seems to tell the widget to serve the images from Amazon's network instead of Akamai's, and SSL is supported.
The url should look like this:
https://rcm-uk.amazon.co.uk/e/cm?t=june2k&o=2&p=16&l=st1&mode=books-uk&search=potter&f=ifr&f=ifr&internal=1

Why do I have both HTTPS and HTTP links on site, need them all secure!

I am getting the security alert: "You are about to be directed to a connection that is not secure. the information you are sending to the current site might be transmitted to a non-secure site. Do you wish to continue?" when I try to login as a customer on my clients oscommerce website. I noticed the link in the status bar goes from a https prefix to a nonsecure http prefix. The site has a SSL certificate, so how do I ensure the entire store portion of the site directs to the secured site?
It is likely that some parts of the page, most often images or scripts, are loaded non-secure. You'll need to go through them in the browser's "view page source" view one by one and eliminate the reason (most often, a configuration setting pointing to http://).
Some external tools like Google Analytics that you may be embedding on your site can be included through https://, some don't. In that case, you may have to remove those tools from your secure site.
If you can't switch all the settings, try using relative paths
<img src="/images/shop/xyz.gif">
but the first thing is to identify the non-secure elements using the source code view of your browser.
An immediate redirection from a https:// page to a http:/ one would not result in a warning as you describe. Can you specify what's up with that?
Use Fiddler and browse your site, in the listing it should become evident what is using HTTP and HTTPS.
Ensure that the following are included over https:
css files
js files
embedded media (images, videos)
If you're confident none of your own stuff is included over http, check things like tracking pixels and other third-party gadgets.
Edit: Now that you've linked your page, I see that your <base> tag is the problem:
<base href="http://balancedecosolutions.com/products//catalog/">
Change to:
<base href="https://balancedecosolutions.com/products//catalog/">
If the suggestion from Pekka doesn't suit your needs you can try using relative links based on the schema (http or https):
e.g.,
I am a 100% valid link!
The only problem with this technique is that it doesn't work with CSS files in all browsers; though it does work within Javascript and inline CSS. (I could be wrong here; anyone want to check?).
e.g., the following :
<link rel="stylesheet" href="/css/mycss.css" />
<!-- mycss.css contents: -->
...
body{
background-image:url(//static.example.com/background.png);
}
...
...might fail.
A simple Find/Replace on your source code could be easy.
It sounds to me like the HTML form you are submitting is hardcoded to post to a non-secure page.