Error sending Tweet

Error sending Tweet
0
#1

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

0 Likes
#2

Can you share the codepen link?

0 Likes
#3
0 Likes
#4

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.

0 Likes
#5

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

0 Likes
#6

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.

0 Likes
#7

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?
0 Likes
#8

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
#9

Thanks much; got it working!

0 Likes
#10

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