webdesign/HTML

SVG external spritemap instances not viewable in local environment

yunsoo.note 2022. 7. 8. 00:06

안정성문제  / 에버노트


1. HTTP SERVER : html서버 돌려서 해결 :
 
npm install http-server -g   - 글로벌에 이미 설치됨
 
작업 폴더 > html (index.html페이지 존재하는 폴더)로 이동 : 터미널 두 개 열어서 한번에 돌리기 터미널

http-server

1-1. by using Live Server in VS Code


2. LOCAL FILE ACCESS : 브라우저 로컬 파일 액세스 설정 바꿔서 해결 :
 
Chrome : in the command linestackoverflow  /  link
open /Applications/Google\ Chrome.app --args --allow-file-access-from-files
 
Safari : set the browser menu  link
Develop > disable local file restrictions
 
firefox : in Firefox address bar link
about:config
search  security.fileuri.strict_origin_policy  >  true to false link
 

🎏🧚🏻‍♂️ 1. HTTP SERVER :

npm install http-server -g

 
작업 폴더 > html (index.html페이지 존재하는 폴더)로 이동 : 터미널 두 개 열어서 한번에 돌리기 터미널
using command prompt or terminal, browser to a folder with some html you want to serve as http. (ie: c:\someproject\). link

http-server


You’ll most likely need to run this with at least admin access, and I would caution visiting unknown sites with this setting on, as they could capitalize on your setting and potentially read local files.
 
Update, see my newer post on using node and http-server to create a local web server to get around these issues:Local web server for testing / development using Node.js and http-server
 

🎏 2. LOCAL FILE ACCESS :

 
But due to browser security settings, developing this way can still trigger CORS-related errors when you load in local files, such as an mp4.
This is not an SVG issue, more of an environment issue. link
Chrome's security model doesn't allow it. You can run with the command line option --allow-file-access-from-files to override this. link

ALLOW LOCAL FILE ACCESS IN CHROME (WINDOWS)

You’ll most likely need to run this with at least admin access, and I would caution visiting unknown sites with this setting on, as they could capitalize on your setting and potentially read local files.

Update, see my newer post on using node and http-server to create a local web server to get around these issues:
Local web server for testing / development using Node.js and http-server


Chrome : in the command linestackoverflow  /  link
open /Applications/Google\ Chrome.app --args --allow-file-access-from-files
 
Safari : set the browser menu  link
Develop > disable local file restrictions

 

firefox : in Firefox address bar link
about:config
search  security.fileuri.strict_origin_policy  >  true to false link

Chrome :
크롬 브라우저 다 닫고 커맨드 창에 아래 명령어 입력
open /Applications/Google\ Chrome.app --args --allow-file-access-from-files
참조 :
In the Chrome address bar, navigate to chrome://version
On this page, find and copy the value of "Command Line". It will look like /Applications/Google Chrome.app/Contents/MacOS/Google Chrome.
Open your Terminal and paste in the file path to the Chrome executable you just copied
If it's not recognizing the path, the spaces in the file path might need to be escaped with a forward-slash like Google\ Chrome.app
Before you hit enter, two more things to add to this command
Add the following flag to the end of your command: --allow-file-access-from-files
 
Safari :
브라우저 메뉴에서 아래와 같이 제한 풀어주는 설정
Develop > disable local file restrictions
 
firefox :
브라우저 주소줄에
about:config
security.fileuri.strict_origin_policy 검색 >  true를 false로
기존 privacy.file_unique_origin 었으나 현재 없어짐
firefox 주소 입력창 > about:config
Proceed with Caution
Changing advanced configuration preferences can impact Firefox performance or security.
Warn me when I attempt to access these preferences
------------
I just recently checked and it seems that it had been removed? There's a (personal) project I'm working on that relies on this, and it has suddenly stopped working. If anyone is able to help me, that would be great.
Support for that preference seems to have been dropped starting with Firefox 95.