Created
August 3, 2024 08:11
-
-
Save BoQsc/ad1e1526f3e7c2e7cfa663736366dfc4 to your computer and use it in GitHub Desktop.
Third party CORS demo for fetching user profile of steam using pure clientside javascript.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Fetch and Display Image</title> | |
| <style> | |
| #avatar { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Steam Profile Avatar</h1> | |
| <img id="avatar" alt="Steam Profile Avatar"> | |
| <script> | |
| async function fetchAndDisplayAvatar() { | |
| const profileUrl = 'https://steamcommunity.com/profiles/76561198289350004'; | |
| const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(profileUrl)}`; | |
| try { | |
| // Fetch the profile page through the proxy | |
| const response = await fetch(proxyUrl); | |
| const data = await response.json(); | |
| const text = data.contents; | |
| // Create a new DOM parser | |
| const parser = new DOMParser(); | |
| const doc = parser.parseFromString(text, 'text/html'); | |
| // Find the image source | |
| const avatarElement = doc.querySelector('.playerAvatarAutoSizeInner img'); | |
| if (avatarElement) { | |
| const avatarSrc = avatarElement.src; | |
| // Display the image | |
| document.getElementById('avatar').src = avatarSrc; | |
| } else { | |
| console.error('Avatar element not found'); | |
| } | |
| } catch (error) { | |
| console.error('Error fetching or parsing the profile page:', error); | |
| } | |
| } | |
| // Execute the function | |
| fetchAndDisplayAvatar(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment