Does anyone tell me why images from s3 are not visible in my meteor template?
If I type image url in browser it is showing that image, but not in my template.
So this is my template code:
<template name="test">
<div>
<img src="http://mybucket.s3.amazonaws.com/images/1_p.jpg " />
</div>
...
</template>
And error coming is:
Refused to load the image 'http://mybucket.s3.amazonaws.com/images/1_p.jpg' because it violates the following Content Security Policy directive: "img-src data: 'self' http://.googleapis.com https://.googleapis.com http://.gstatic.com https://.gstatic.com http://.bootstrapcdn.com https://.bootstrapcdn.com".
test:1 Uncaught SyntaxError: Unexpected token Y
Thanks guys. I resolved this problem. Actually I'm using browser-policy package and in order to access data on s3 I need to add s3 url in whitelist..
Related
When I use Google form embedded code then it's working fine. But when i click on Clear Form button then it has redirected to the original google form URL without "?embedded=true" parameter.
So, we will get this error
[Report Only] Refused to frame 'https://docs.google.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".
Let me know How can i solve it?
Your page is being framed by docs.google.com. If you want to allow that you will need to set the following directive instead: "frame-ancestors docs.google.com;"
I use an iframe to display several documents in an iframe with dynamic src. Some of them exist, but some others do not and I receive a 404 Error.
Please find my code below:
<iframe class="e2e-iframe-trusted-src" style="width: 100%" height="1000"
[src]="trustedUrl" (load)="oniFrameLoad($event)"></iframe>
Please let me know how I can handle the 404 error (or even better know beforehand that the src path does not exist and the document is not displayable).
In AEM 6.2, I want to do this in handlebars.
<sly data-sly-resource="${'title' # resourceType='myproject/components/content/common/title'}"/>
Specifically, I overlaid the qnaforum.hbs and need to include it in there. The official documentation(link) says the correct way to do this is:
{{include this.id path="title" resourceType="myproject/components/content/common/title"}}
When done this way there are three problems:
The component appears, but then disappears from the page.
I get the warning "Forcing resource type is not supported when sling including on the client side"
There is a failed(404) GET request to http://localhost:4502/content/myproject/qna-index-page/jcr:content/qna-parsys/qna/title.html in the browser console (like it's trying to find the renderer for the title resource at that path).
In the same qnaforum.hbs file, Adobe is using the same include for their subscriptions component and it seems to work fine.
{{include this.id path="subscriptions" resourceType="/libs/social/subscriptions/components/hbs/subscriptions"}}
Does this type of include only work for Social Communities components? If so, how can I include a custom resource in the handlebars template?
I helped some one else who was facing a similar issue. I am attaching the code snippet that caused the issue you are facing (disappearing QnA list), and the fix for that.
The overlaid QnAForum component looked like this
{{include this.id path="qnaforum-top" resourceType="custom/components/modules/qnaforum-top"}}
{{#if-wcm-mode mode="EDIT" }}
<div class="scf-includeClientLib">{{includeClientLib js="cq.social.commons.widgets, cq.social.toggle"}}</div>
{{/if-wcm-mode}}
<div data-module="qna-index" class="scf scf-forum scf-qna " data-component-id="{{id}}" data-scf-component="social/qna/components/hbs/qnaforum">
{{!-- Other QnA code --}}
</div>
But code should be like this
{{#if-wcm-mode mode="EDIT" }}
<div class="scf-includeClientLib">{{includeClientLib js="cq.social.commons.widgets, cq.social.toggle"}}</div>
{{/if-wcm-mode}}
<div data-module="qna-index" class="scf scf-forum scf-qna " data-component-id="{{id}}" data-scf-component="social/qna/components/hbs/qnaforum">
{{!-- moving line1 from previous code snippet inside this parent div}}
{{include this.id path="qnaforum-top" resourceType="custom/components/modules/qnaforum-top"}}
{{!-- rest of QnA Code }}
</div>
The change I made is, moving line1 in first code snippet into line 5.
The JS console does say missing HTML, but it gets included though. The reason for console error is the way include works.We try to fetch the html, and if we fail in fetching the HTML, we ask to sling to resolve the component.
I am embedding an iFrame in my web page, something like this:
var iframeProps = {
'data-type': self.props.type,
allowTransparency: self.props.allowTransparency,
className: self.props.className,
frameBorder: self.props.frameBorder,
height: self.props.height,
key: url,
onLoad: self.props.onLoad.bind(self),
scrolling: self.props.scrolling,
src: self.state.isActive ? url : '',
style: self.props.styles,
width: self.props.width
};
<iframe {...iframeProps} />
This is throwing an error in the console
Refused to display 'https://twitter.com/.... in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
Could anyone please tell me how can I make this work?
The content is prohibited from being displayed within an IFRAME due the Content Security Policy being set. The webserver hosting twitter.com is configured to add a HTTP header to the response object. Specifically they are setting the Content-Security-Policy tag to frame-ancestors 'self'. There is no way you'll be able to embed their pages into a page of your own using IFRAME. There are other techniques that you could use to work around that, but none are as simple as an iframe tag.
W3C Content Security Policy Level 3 - Frame Ancestors
I encountered with this problems recently too and i didn't find any alternative method to solve that.Finally, I came up with idea that the attribute in the iframe,which is "src",can be filled with the origin html content and it works.
// this demo shows the process of getting the html content
// from the link,and then apply it to the attribute "src" in the iframe
$.get(link, function (response){
var html = response;
var html_src = 'data:text/html;charset=utf-8,' + html;
$("#iframeId").attr("src" , html_src);
});
This issue was occurring when trying to upload proof of identity documents to Amazon Pay. The solution was to clear the browser cache and cookies.
The following is my current code,
https://github.com/daslicht/kiss
After cloning it to my server I have added the spiderable package
and added phantomjs to the $PATH.
The basic structure of my app is essentially a Master Details layout,
on the left we have a list of headlines(Master)
and on the right the according details to each Headline.
So far so good..., when I call one page with:
http://78.47.126.11:3000/?_escaped_fragment_=blog/SbZayHyqKmZhCEHme/1
I get my Headlines displayed but not the according Details.
Do you have any idea what could be going wrong ?
Currently it is running as bundle with forever.
Best Regards
Marc
If think the Spiderable package won't show stuff from MongoDB, only static template-stuff.
So in this example only the static stuff will show, not the DB-loop:
<template name="main">
{{> thisWillBeOutputted}}
</template>
<template name="thisWillBeOutputted">
<h1>This will be displayed, sweet!</h1>
{{#each thisLoopFetchesStuffFromDBAndWontShow}}
<!-- stuff in this loop won't be displayed :( -->
<p>Something which won't be displayed: {{dbDoc.something}}</p>
{{/each}}
</template>
To summarize (what I believe is correct):
The Spiderable package better than not displaying anything for bots (which is the case with vanilla-meteor), but it's not as good as a good-old-PHP/whatever-site.
EDIT
I misunderstood your problem. What I would do is add <meta name="fragment" content="!"> to your head instead of going with the escaped-fragment thing. More here: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started
I'm still pretty sure your DB-stuff won't get picked up by Google though. But I could be wrong!
If I understood, your app is ignoring 'blog/SbZayHyqKmZhCEHme/1'.
The error is because:
https://github.com/meteor/meteor/issues/487
The spiderable package does not currently reattach the escaped
fragment back onto the url sent to phantomjs, so it's not possible for
the page to display the correct content.
For example if googlebot encounters a url:
http://domain.com/#!page
It will make a request from the server:
http://domain.com/?_escaped_fragment_=page
However at the moment, the spiderable package will call phantomjs with
the following url:
http://domain.com/
My solution is to create your own spiderable package with fix by 'https://gist.github.com/4096777'