raw.githubusercontent.com

[Complx21]

Select Topic Area

Question

Body

I'm trying to connect my site to a GitHub repository and run an index.html page in an iframe using raw.githubusercontent.com, but I keep getting an error saying "raw.githubusercontent.com refused to connect". If anyone could help that would be great.

[locflamedia]

The issue you're facing may be due to X-Frame-Options being set to deny, which causes GitHub to refuse the connection.

Here are some solutions you can try:

Use gh-pages instead of raw.githubusercontent.com.
Set up a proxy server to fetch content from raw.githubusercontent.com — although this can be quite complex.
Use other services like Vercel, Netlify, etc.

[Complx21]

what would I do with netlify becuz I'm already using it for deploying.

[R3posit]

Hmm really good idea.

[ThisIs-Developer]

hey @Complx21,

you’re running into the X-Frame-Options issue with GitHub. since you’re using Netlify, try this:

1. host your HTML on Netlify: deploy your index.html directly to your Netlify site instead of using raw.githubusercontent.com.

this should resolve the issue!

---

if it helps, feel free to mark it as the answer! 😪

[Complx21]

I could link the repo to a Netlify site but then how would I get the thumbnail and the title data, because the method I'm using it creates a button automatically for every item in the list then gets the data from the root file listed, like this:
`const listUrl = 'https://raw.githubusercontent.com/Complx21/files/main/list.json';

fetch(listUrl)
.then(response => response.json())
.then(data => {
console.log(data); // Log the fetched data
const gameButtons = document.getElementById('game-buttons');
data.forEach(game => {
const button = document.createElement('button');
button.className = 'game-card';
button.innerHTML = <img src="https://raw.githubusercontent.com/Complx21/files/main/Icons/${game.gameroot.replace(/\//g, '')}.webp" class="button-img"> <a>${game.game}</a>;
button.onclick = () => loadGame(https://raw.githubusercontent.com/Complx21/files/main/${game.gameroot}index.html);
gameButtons.appendChild(button);
});
})
.catch(error => console.error('Error fetching the game list:', error));

function loadGame(url) {
const gameContainer = document.getElementById('game-container');
const gameIframe = document.getElementById('game-iframe');
gameIframe.src = url;
gameContainer.style.display = 'block';
}

function closeGame() {
const gameContainer = document.getElementById('game-container');
const gameIframe = document.getElementById('game-iframe');
gameIframe.src = '';
gameContainer.style.display = 'none';
}`

[ThisIs-Developer]

Adjust the Fetch URL

You should not need to change the existing fetch logic unless you change the hosting method of your list.json. Here’s your existing code slightly modified for clarity:

const listUrl = 'https://raw.githubusercontent.com/Complx21/files/main/list.json';

fetch(listUrl)
  .then(response => response.json())
  .then(data => {
    const gameButtons = document.getElementById('game-buttons');
    data.forEach(game => {
      const button = document.createElement('button');
      button.className = 'game-card';
      button.innerHTML = `<img src="https://raw.githubusercontent.com/Complx21/files/main/Icons/${game.gameroot.replace(/\//g, '')}.webp" class="button-img"> <a>${game.game}</a>`;
      button.onclick = () => loadGame(`https://raw.githubusercontent.com/Complx21/files/main/${game.gameroot}index.html`);
      gameButtons.appendChild(button);
    });
  })
  .catch(error => console.error('Error fetching the game list:', error));

function loadGame(url) {
  const gameContainer = document.getElementById('game-container');
  const gameIframe = document.getElementById('game-iframe');
  gameIframe.src = url;
  gameContainer.style.display = 'block';
}

function closeGame() {
  const gameContainer = document.getElementById('game-container');
  const gameIframe = document.getElementById('game-iframe');
  gameIframe.src = '';
  gameContainer.style.display = 'none';
}

This way, you'll be able to maintain your current functionality while hosting on Netlify! Let me know if you need further assistance!

[R3posit]

Ow its looking very hard!

[ThisIs-Developer]

Thanks for your response!

• Iframe Loading: If the URLs are correct and there are no CORS restrictions, the iframes should work.
• Example JSON Structure:

  [
    {
      "game": "Game Title 1",
      "gameroot": "path/to/game1/",
      "thumbnail": "path/to/thumbnail1.webp"
    }
  ]

If it doesn’t work, consider hosting the games on GitHub Pages, Vercel, or Cloudflare as alternatives.

[ThisIs-Developer]

Setting up a proxy server to fetch content from raw.githubusercontent.com is another option, but it's more complex and may involve security considerations.

[Complx21]

Thank you, but what did you change. Also this updated version I should be able to replace my code with this, then host the games repo (Which is separate from the site repo, btw) and the ifames will work?

[Complx21]

@ThisIs-Developer

[ThisIs-Developer]

@Complx21 😕 sorry, Hope it gets sorted soon!

[Complx21]

wdym?

[LiteBrite82]

Thanks for posting in the GitHub Community, @Complx21 !

We’ve moved your post to our Programming Help 🧑‍💻 category, which is more appropriate for this type of discussion.

Please review our guidelines about the Programming Help category for more information.

[joselopeztelus]

minishift 1.34.3 windows version is impacted with this problem.

[Complx21]

wdym???