Codepen Twitter Link Blocked - Error 401

1

Hello all, I am working on my quote machine project in Front End Libraries. I am using React and have just placed my tweet link. If I right-click ‘open in new tab,’ everything works as expected. If I left-click, I get an error 401. This happens whether I set target="_blank" or not which seemed to be a common fix for many others having trouble linking from codepen.

Here is the log:
DevTools failed to load SourceMap: Could not load content for https://ton.twitter.com/responsive-web-internal/sourcemaps/client-serviceworker/serviceworker.91a36bf5.js.map: HTTP error: status code 401, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Here is my pen:
https://codepen.io/shekine/pen/JjKZKEG?editors=0010

Any help would be appreciated. I feel like I am missing something really simple and just overthinking it.

2

  1. For the string encode give encodeURIComponent a look.

  2. For the target attribute use target="_top" and after you change and save refresh the pen (F5) completely. Note, the link will not open up in a new tab.

2 Likes
3

To expand on @lasjorg’s comment, the target="_top" attribute will open the linked webpage (in this case, twitter) in your current window. So before clicking the link, make sure you’ve saved your work. :slight_smile:

4

Wow, that definitely appeared to fix the issue outright.

I would be lying if I said I fully understood why it worked - so is this something to do with codepen’s context and not my link code itself? Or do I have some deeper digging to do?

Thank you for the encodeURIComponent reference! I had no idea anything like that existed. I just picked apart the href in the Twitter Dev Docs haha. My bad.

5

it’s a change in twitter, it doesn’t allow that link to work anymore in embeds (which the codepen preview is)

1 Like