Created
January 5, 2023 21:31
-
-
Save asciidiego/978b5be3e64142ea7694f71cf3d49f7f to your computer and use it in GitHub Desktop.
CLRF not being sent as a Data Transfer object
This file contains hidden or 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
| Some references: | |
| - [1]: https://html.spec.whatwg.org/multipage/dnd.html#drag-data-store-item-list | |
| - [2]: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData#specifications | |
| - [3]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event | |
| - [4]: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types |
This file contains hidden or 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
| <!-- HTML Boilerplate --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Drop</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="p-4 max-w-lg"> | |
| <h1 class="font-bold">Simple DataTransfer demo</h1> | |
| <p> | |
| This is a simple demo where a URI list with a comment will be sent as a | |
| <a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer" target="_blank" | |
| ><code class="underline">DataTransfer</code></a | |
| > | |
| object to the canvas using a standard <code class="inline-block">drop</code> event. | |
| </p> | |
| <p> | |
| The issue is that the <code class="inline-block">DataTransfer</code> object does not contain | |
| the <code class="inline-block">\r\n</code> characters. | |
| </p> | |
| <div class="flex items-center gap-4"> | |
| <div id="source" draggable="true" class="border p-1 rounded bg-white"> | |
| <span class="select-none"> Drag me into canvas </span> | |
| </div> | |
| <canvas id="canvas" class="border" width="256" height="256"></canvas> | |
| </div> | |
| <hr class="my-2" /> | |
| <pre>Output</pre> | |
| <div class="p-2 px-4 border rounded w-full h-80"> | |
| <code id="output" class="text-sm"> </code> | |
| </div> | |
| </body> | |
| <script> | |
| const rawData = `https://www.example.com/\r\n#COMMENT`; | |
| const source = document.getElementById('source'); | |
| source.addEventListener('dragstart', (e) => { | |
| e.dataTransfer.setData('text/uri-list', rawData); | |
| }); | |
| const target = document.getElementById('canvas'); | |
| // Add the start, draw "Hello World" to the canvas | |
| const ctx = target.getContext('2d'); | |
| ctx.font = '20px serif'; | |
| ctx.fillText('Contains CRLF?', 10, 50); | |
| target.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| }); | |
| target.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| const data = e.dataTransfer.getData('text/uri-list'); | |
| console.log(data); | |
| const containsNewCRLF = data.includes('\r\n'); | |
| const ctx = target.getContext('2d'); | |
| ctx.font = '20px serif'; | |
| ctx.fillText(containsNewCRLF, 10, 80); | |
| // Put RAW data in the output (Raw string) | |
| document.getElementById('output').innerText = `Expected:\n${rawData}\n\nActual:\n${data}`; | |
| }); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment