Link Hijacking

[wraybowling]

There is a piece of JavaScript that looks like this

ev => {
  ev.preventDefault();
  const href = ev.target.href;
  parent.postMessage({
    linkClick: href
  }, "*");
}

that was added as a remedy to issues #40 and #41. I am spending some time trying to understand what the original problem was, but this was not an appropriate fix. A parent would only be present if preciousplastic.com used frames and you needed to post a message to the parent frame. Since there are no frames, using the postMessage function and preventing the default behavior, all anchors do not link to their designated hyperlink, but instead generate a pop-up window which modern browsers will block.

No normal anchor should be given an event handler in this way. If you want to force a new window, simply add target="_blank" either in the markup or if you must via scripting after the fact. Adding lots of event listeners is often a performance hit, and just the wrong way to do this.

Determining which links are external is also not something that can be done so naively as if(!node.href.includes(location.host) because there are many domains that host precious plastic content. This also sets you up to make all of your links absolute instead of relative which makes life a little harder all around.

I'm posting this as an issue instead of a pull request because I think there will need to be some discussion about what new solution will fit best.

Filtering

Filtering Option 1, Simple & Pure:

• make all in-site links relative
• make all external links absolute

Filtering Option 2, White Listing:

• fix the script to look for links from all approved precious plastic related web sites

Execution

Execution Option 1, Templates & CSS

• filter links that start with http in the static site generator and simply add target="_blank"
• bonus: external links can have a suffix symbol, purely css looking for either http or target

Executioner Option 2, Modify The target properties

• modify every anchor's target with a script when the DOM loads vianode.target="_blank"

[chrismclarke]

Slow to see this, just for context the original challenge was to display the academy site embedded as an iframe within the community website. Example at: https://community.preciousplastic.com/academy

We wanted two-way communication so that navigation within the iframe reflects on the top url, and so that a direct link from the community site will display the child iframe on the correct page. E.g. https://community.preciousplastic.com/academy/plastic/safety

There's also some added challenges of opening external links from within the iframe (passing the request back up to the parent).

[chrismclarke]

I'm just trying to recreate the message you see, can you please give instructions? Is it from the academy site itself or another site hosting it?

[wraybowling]

exhibit in this useful links section https://onearmy.github.io/academy/build/shredder#-useful-links