Error sending Tweet

For the QuotesTweet exercise, I have the thing working on my local machine with webpack and nodejs. However, when I run it in CodePen, I get the following console error when attempting to send the quote:
Refused to display 'https://twitter.com/intent/tweet?

text=A%20house%20divided%20against%20itself%20cannot%20stand.%20//%20Abraham%20Lincoln’ in a frame because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘self’”

So far, my searches haven’t shed much light on this issue, although there are quite a few posts about it.

Suggestions? Thanks

Can you share the codepen link?

Sorry for the late reply.

I’m not sure how the twitter widget button works. But what you can do is to have a plain <a> element and use Tweet Web Intent.

https://dev.twitter.com/web/tweet-button/web-intent

Every time a new quote appears, you just need to change that <a>'s href attribute so the text parameter contains the quote.

No worries, @kevcomedia - I’ll give a try right now. Tried several different Twitter APIs but somehow missed that one. Thanks!

Did that; still getting the same error:

Refused to display 'https://twitter.com/intent/tweet?text=$(myQuote)&hashtags=freecodecamp&via=jesii' 
in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

I’m working to get window.open() to work, as that was suggested in this FCC comment (Build a random quote machine - twitter sharing is not working please help me) but so far not having much success.

So I got the codepen.io headers:

curl https://codepen.io -D codepen.io.headers

HTTP/1.1 200 OK
Date: Mon, 20 Nov 2017 17:17:55 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Set-Cookie: __cfduid=daa838fe944f4a858790c76fe114485081511198274; expires=Tue, 20-Nov-18 17:17:54 GMT; path=/; domain=.codepen.io; HttpOnly
Status: 200 OK
Cache-Control: max-age=0, private, must-revalidate
X-Request-Id: 41943107-179c-4799-85d5-ad15ca84744d
X-Env: production
X-Frame-Options: ALLOWALL
X-Runtime: 0.237509
Set-Cookie: codepen_session=VVJpaTNsaDgrb0JuNWhUL0VIbHRPeDZWb1NObHZSY2hXek96WGdsUmErYXVncG52VlJDbHM0NWVHbzAvL2JBRC92ZmVtcXV2Wnp2a2dJQk1BZWF1elBpVVZPdG5jdWJyNHVjMjhtcG9GdEdDY2FJS1JKem8yaFRDT0RLTkMweXo4WnpJNTdrVElYV0tTeHJwazlNTzI5dDFmaFJyZkxQWER1Z2kxVGdyQWZteDJNKzBHV2V1V2FGbkNuY0RFc1F4LS01SWoyMXMyQ2JMTkFWSlppd2FCTUhBPT0%3D--b315d10959e2ef52e7949b7350d2f61170ac4aba; path=/; expires=Wed, 20 Dec 2017 17:17:55 -0000; secure; HttpOnly
X-Powered-By: Phusion Passenger Enterprise 5.1.11
Server: cloudflare-nginx
CF-RAY: 3c0d10c1ccc0282e-SJC
```
and they are not setting the CSP policy (frame-ancestors) that seems to be causing this error -- I wonder who is?

This worked for me:
$("#tweet").on(“click”, function(){
window.open(“https://twitter.com/intent/tweet?text=” +randomQuote + " " +randomAuthor);
});

I think window.open is required in CodePen.

1 Like

Thanks much; got it working!

I managed to fix this by simply adding the target=’_blank’ attribute to my a element like so:

a href=‘twitter_link_here’ target=’_blank’

Apparently codepen doesn’t allow you to open the twitter link in the same window, so the link works as long as you open it in a different window.

Hope this helps!

2 Likes