How to have a frontend that can redirect to arbitrary web pages

Developers Motoko
1

I want to add a frontend to my app that can link to arbitrary web pages:

<div class="exclass" style="width:600px; height:250px; border:1px solid #ccc; margin:20px auto;">
    <a href="dfinity.org" target="_blank" style="text-decoration:none;">
       <img src="https://pbs.twimg.com/profile_images/1822251208943300608/pu9RLM_h_400x400.jpg" alt="${ad.title}" style="width:100%; height:auto; border:0;">
          <p style="text-align:center; font-size:14px; color:#333;">${ad.title}</p>
    </a>
</div>

But when I click on this box, is trying to redirect me to http://127.0.0.1:4943/dfinity.org
instead of http://dfinity.org

How can I remove 127.0.0.1:494 and just go to http://dfinity.org ?

2

Without a protocol, the anchor href is interpreted as path on the current domain.

<a href="https://dfinity.org">
1 Like
3

I have updated the code as suggested:

<div class="exclass" style="width:600px; height:250px; border:1px solid #ccc; margin:20px auto;">
    <a href="http://dfinity.org" target="_blank" style="text-decoration:none;">
       <img src="https://pbs.twimg.com/profile_images/1822251208943300608/pu9RLM_h_400x400.jpg" alt="${ad.title}" style="width:100%; height:auto; border:0;">
          <p style="text-align:center; font-size:14px; color:#333;">${ad.title}</p>
    </a>
</div>

Now I get an undefined error in the image box. So, it seems it cannot find the image:

image
image744×533 25 KB

I have verified that this image exist. Can you see what I can be doing wrong?

4

The HTML by itself seems to load the image fine, you probably need to update the asset canister CSP to allow it for loading images from other domain(s) besides your canister itself.

1 Like
5

For the record, now it works when I updated the ‘.ic-assets.json5’ file by adding ; img-src 'self' * to the line starting with "Content-Security-Policy":

2 Likes