I want to prevent access to files from my code editor

Hosting Support
1

-1

I have an online html code editor via .php hosting, but there is a problem that this editor is a huge loophole that someone can browse my entire site’s data using it. For example, someone wrote this code

<img src="../../img/0102.png" alt="">

The editor will display the image without hesitation. I want the solution in an intelligent way because when I asked the artificial intelligence, it suggested that I make my files on my site not authorized to be accessed via .htaccess, but this prevented all the pages of my site from appearing as required in a natural way. Please I want the solution HTML editor code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Code Editor</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/theme/dracula.min.css">
  <style>
    /* Set the size of the editor and result div */
    .editor-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      background-color: #f1f1f1;
    }

    .editor-toolbar {
      background-color: #333;
      color: white;
      padding: 10px;
    }

    .CodeMirror {
      flex-grow: 1;
      border: 1px solid #ddd;
    }

    .result-container {
      padding: 10px;
    }

    iframe {
      width: 100%;
      height: calc(100% - 40px); /* Subtract the padding */
      border: none;
    }

    button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      border-radius: 5px;
    }

    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <div class="editor-toolbar">
    <button onclick="downloadCode()">Download Code</button>
  </div>
  <div class="editor-container">
    <textarea id="code-editor"></textarea>
    <div class="result-container">
      <h2>Result:</h2>
      <iframe id="result-frame"></iframe>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/mode/htmlmixed/htmlmixed.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/mode/xml/xml.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/mode/javascript/javascript.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/mode/css/css.min.js"></script>

  <script>
    var editor = CodeMirror.fromTextArea(document.getElementById("code-editor"), {
      lineNumbers: true,
      mode: "htmlmixed",
      theme: "dracula" // تحديد السمة هنا
    });

    function updateResult() {
      var code = editor.getValue();
      document.getElementById("result-frame").srcdoc = code;
    }

    function downloadCode() {
      var code = editor.getValue();
      var element = document.createElement('a');
      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(code));
      element.setAttribute('download', 'code.html');
      element.style.display = 'none';
      document.body.appendChild(element);
      element.click();
      document.body.removeChild(element);
    }

    // Update result on editor change
    editor.on("change", updateResult);
    // Initial update
    updateResult();
  </script>
</body>
</html>

I expect there to be a comprehensive method via PHP itself, but I feel like JavaScript won’t help with this. Is it possible, for example, to specify htaccess codes to prevent access to other files through the code editor without preventing the pages of my site from running?

2

You would need to create an isolated environment for it, or replace file calls. The first is not really all that possible on free hosting, and the second is hard to do.

The easiest way to do this is to create a subdomain that only holds this page.

6 Likes
3

I thought about it, but my fear was that any user could access the editor itself and edit it. If you look from this direction, you will find that this is possible.
This would be very dangerous

4

You may setup up hard checks in the PHP file that is handling the actual edits to not edit neither gives out the content of certain files like your editor files.

Setting up subdomains also isolate the editor out so it might also help as GreenReader9 mentioned.

5 Likes
5

You say there is PHP code involved in this? What does the PHP code do?

In the code you shared, all I see is Javascript and HTML, which is completely safe.

Yes, someone can embed images from your site into the code they create, but that’s always the case. If you want to use an image on your page, you have to make it downloadable by browsers. And if it’s downloadable by browsers, it can be embedded in other pages too. With or without your editor.

7 Likes
6

I made a few changes, the main one being that I created a subdomain as you told me

I have put the following codes in .htaccess

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

RewriteCond %{HTTP_REFERER} !^http://(www\.)?yourdomain\.com/ [NC]
RewriteRule \.(jpg|jpeg|png|gif|php|html|js|mp3|ogg|mp4)$ - [NC,F,L]

<FilesMatch "restricted-page\.html">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</FilesMatch>

<Files "index.php">
    Order allow,deny
    Allow from all
</Files>

is this enough? I’m afraid I’ve created a vulnerability that I know nothing about. Can users (hackers) modify the Index.php page itself?

7

Does the file actually have PHP code in it?

7 Likes
8

To go back to the question you originally asked, I should make one thing crystal clear: a HTML/Javascript based code editor does not enable anyone to access or modify any files on your account.

HTML code is rendered in the browser of the visitor. Any visitor can open the Developer Tools in their browser and modify the HTML code shown. However, this only affects the current page they are seeing. There is no way for them to update the code that’s stored on the server and sent to other visitors, so there is no risk.

There is no inherent way for web browsers to read or modify source code on the server. So any code that runs in the web browser cannot read or modify files on your site.

The only way people could modify files on your site is if you have PHP code on your site that enables them to do so. PHP runs on the server so it can be used to modify files on the server. So if you have code that allows people to run their PHP code on your website, or allows them to request your PHP code to read or write arbitrary files from the server storage, then you are at risk.

If you have no PHP code that could ever do such a thing, then there is zero risk.

If you do have PHP code that people could use to read files and write files through PHP, or run their own code, then you are at risk. But the only way to fix that is to secure your PHP code. There is no way to secure this through HTML, Javascript or .htaccess rules.

So please check for yourself if there is any PHP code that could allow people to make changes to your files. If you’re not sure, please share the relevant code here.

And to be clear: none of the code you’ve shared so far could ever create such a vulnerability. HTML code cannot make your site vulnerable.

The specific code you shared here only prevents third party embedding of assets on your site. However, that’s already the case by default. And if people can download or modify your files now, then these .htaccess rules will do nothing at all to stop it.

8 Likes
9

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.