Angular.js: ng-if 및 ng-repeat에 의해 생성된 주석을 어떻게 제거할 수 있습니까?

내부적으로 어떻게 작동하는지 말할 수는 없지만 Angular는 실제 DOM 노드를 출력으로 포함하거나 포함하지 않을 수 있는 지시문을 추적하기 위해 이러한 주석이 필요합니다. 예를 들어, ngIf가 false이면 DOM 노드가 없지만 Angular 컴파일러는 지시문이 있는 트리의 위치를 ​​알기 위해 주석이 필요합니다. @caitp 와 같은 다른 누군가가 이것을 더 잘 설명할 수 있다고 확신합니다.

@cc17 왜 이 요소들을 없애고 싶으세요? 목표를 달성하는 더 좋은 방법이 있을 수 있습니다.

댓글은 내가 다른 사람들을 원하지 않는 일부 제품 논리를 보여줄 것입니다.
보다.

2014-08-26 7:05 GMT+08:00 브라이언 포드 알림 @github.com :

@cc17 https://github.com/cc17 왜 이것들을 없애고 싶습니까?
집단? 목표를 달성하는 더 좋은 방법이 있을 수 있습니다.

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/angular/angular.js/issues/8722#issuecomment -53349716.

@cc17에 동의했습니다. 나조차도 같은 것을 성취하고 싶다.

@cc17 이것을 이해하고 싶습니다. Angular는 이 주제를 벗어나는 이유로 이러한 주석 노드가 있어야 합니다.
이제, 당신은 말했다

댓글은 다른 사람들이 보지 않기를 바라는 일부 제품 로직을 보여줄 것입니다.

라고 말하는거야?

• 주석 노드에 정보가 표시되지 않도록 하시겠습니까? 즉, 이것이 빈 주석 노드라면 괜찮을 것입니다.
• 주석 노드가 전혀 없어야 합니다.

첫 번째 옵션을 말씀하신다면 무리가 있을 수 있지만 옵트인이 추가될 가능성이 있습니다. 두 번째 옵션에 대해 이야기하는 경우 해당 옵션을 제거하면 지시문 변환이 작동하는 방식에 대한 큰 리팩터링이 필요하며 곧 일어날지 의심스럽습니다.

@lgalfaso

주석 노드에 정보가 표시되지 않도록 하시겠습니까? 즉, 이것이 빈 주석 노드라면 괜찮을 것입니다.

옵션이라고 할 수 있습니다.

@lgalfaso 예 첫 번째 옵션이 좋습니다. 현재 지시문 동작을 중단하지 않는 필수 주석 본문을 노출합니다.

나는 같은 문제에 대해 같은 답을 찾기 위해 여기에 왔지만 다른 이유 때문에 왔습니다.

다른 사람들이 주석에 대한 Angular의 의존성을 설명하는 것을 듣는 것은 의미가 있습니다. 앱 로직을 숨기는 것에 대한 우려에 대해 2센트를 추가하자면.. Angular는 자바스크립트이며, 우리 모두가 알고 있는 바와 같이 실제로 정점에 도달하여 내부에 있는 내용을 확인하려는 사용자로부터 자바스크립트 코드를 실제로 보호할 수 있는 방법은 없습니다. 내 의견으로는 주석을 제거하면 캐주얼 엿보기가 당신의 논리를 보지 못하게 될 것입니다. 그것은 공격자를 제지하지 않을 것이며 공격자가 코드에서 가능한 노출 또는 약점을 찾는 경로로 각도 주석을 고려한다면 매우 놀랄 것입니다.

@cc17
"댓글은 다른 사람들이 보지 않기를 바라는 일부 제품 논리를 보여줄 것입니다."
? 댓글을 보려면 브라우저의 개발 도구를 열어야 합니다.
거기에 모든 (프론트 엔드 부분) 제품 논리가 표시됩니다! html(원본 및 현재), 자바스크립트, 네트워크 요청...

@seavor
"백만 개의 주석이 있는 DOM 요소를 디버깅하는 것은 정말 짜증나는 일이었습니다."
어떤 각도 페이지(허용 가능한 응답 시간 ;-))를 생성하여 "백만 개의 댓글"을 생성할 수 있는지 궁금합니다.

+1

라이브 HTML에서도 주석을 제거하는 옵션을 보고 싶습니다. 제 눈에는 추하고 산만합니다. 내 텍스트 편집기와 달리 개발자 콘솔은 페이지 높이의 1/3이므로 이러한 추가 주석은 정말 버그입니다.

정확히 Angular가 이것을 필요로 하는 이유에 대한 자세한 내용이 있습니까?

추하고 산만 한 것은 그다지 강력한 이유가 아닙니다. 😉
주석은 angular에서 다음과 같은 내용의 마커로 사용됩니다.
거기에 삽입. 예를 들어 표시되지 않는 ngIf 요소에는 이것이 필요합니다.
그래서 나는 그들이 결코 될 현실적인 기회가 없다고 생각합니다.
제거됨. Angular 2는 이론적으로 동일한 문제가 있어야 하지만 아마도
거기에 다른.
Am 10.02.2016 19:16 schrieb "Alistair G MacDonald" < 알림 @github.com

:

+1

라이브 HTML에서도 주석 옵션을 제거하고 싶습니다.
제 눈에는 추하고 산만합니다.

정확히 Angular가 이것을 필요로 하는 이유에 대한 자세한 내용이 있습니까?

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/angular/angular.js/issues/8722#issuecomment -182509708
.

예, ng2에는 구조적 지시문에 대한 주석도 있습니다. (나는 그들이 <script> 요소를 사용하고 있다고 생각하지만 요소가 CSS 선택기 iirc를 깨뜨리기 때문에 어느 시점에서 주석으로 전환합니다.)

예, @Narretz를 이해 절충점이 무엇인지는 분명하지 않습니다. 기존 DOM 노드를 사용하면 더 잘 수행됩니까? 나는 그것이 많은 차이를 만들 것이라는 이미지를 가질 수 없습니다 (아마도 나는 그것과 거리가 멀다). 아니면 JavaScript 배열을 만드는 것보다 DOM 노드를 반복하는 것이 더 쉬웠습니까?

@F1LT3R , 주석 노드는 마커로 있습니다. 내용이 표시되지 않는 경우(예: ngIf 표현식이 false로 평가되거나 ngSwitchWhen 값이 현재 ngSwitch 표현식과 일치하지 않는 경우 등)에 필요합니다. 이 경우 나중에 실제 요소를 삽입할 위치를 알기 위해 DOM에 자리 표시자가 필요합니다(예: ngIf 표현식이 true로 평가될 때 등).

나는 그것에 대한 옵션이 있기를 바랍니다.

이런 댓글을 남기는건 좋은 생각이 아닌거 같아요
<!-- ngIf: transaction.status==9 && transaction.status!==8 -->

@codetrash , 제안할 더 나은 아이디어가 있다면 우리 모두 귀를 기울

@codetrash 왜 좋은 생각이 아닌가요?

@Narretz 뱅킹, 결제 서비스 등과 같은 매우 민감한 애플리케이션을 위한...

!-- ngIf: transaction.status==9 && transaction.status!==8 -->

위험한 상황으로 이어질 수 있습니다.

@gkalpak 아마도 암호화된 마커 등을

@codetrash 표현식 마크업은 어쨌든 사용자 에이전트에 노출되는 자바스크립트 코드를 기반으로 합니다. Javascript 코드를 난독화하면 정보를 얻기가 더 어려워질 수 있지만 애플리케이션 로직은 여전히 ​​추출할 수 있습니다. 물론 표현식을 제거/난독화하려고 시도할 수 있지만 개인적으로 여기에는 보안 위험이 없고 우선 순위가 낮습니다. 누군가가 그것을 시도하고 싶다면 매우 환영합니다. 비록 그것이 병합 될 것이라고 보장 할 수는 없지만.

@gkalpak 감사합니다. 이해가 됩니다. JS에서 DOM 변경을 추적하려는 시도가 성능과 유지 관리 측면에서 매우 비실용적인 이유를 알 수 있었습니다. "Angular가 DOM의 모든 것을 제어한다"고 말할 수 있다면 좀 더 실현 가능할 수도 있지만 Angular는 모든 종류의 타사 라이브러리와 함께 섞이는 경향이 있으므로... 어. "두 가지 악 중 작은 것".

@codetrash
<위험한 상황으로 이어질 수 있습니다>>
?? 이 코드는 어쨌든 첫 번째 단계에서 일반 텍스트로 보낸 html에서 읽을 수 있으므로 ...

+1.

@smurugavel 이 문제를 단순히 +1하지 마십시오. 이러한 의견에 반대하는 설득력 있는 사례는 아직 없으므로 단순히 +1한다고 해서 이를 구현하지는 않습니다.

@Narretz @cc17이 말했듯이 개발자 도구를 통해 소스 코드를 볼 수 있는 다른 사람들이 볼 필요가 없는 비즈니스 로직이 내 관심사였습니다.
이 스레드의 제안을 살펴보니 @lgalfaso 의 첫 번째 옵션이 저에게는 괜찮
또는 Angular 팀이 사람이 읽을 수 없는 이러한 주석을 암호화하거나 Angular가 내부적으로 추적할 수 있는 고유 식별자를 추가할 수 있습니까? 그냥 내 생각..

@smurugavel , 이 스레드에서 이미 언급했듯이 이러한 주석에는 템플릿에서 이미 일반 텍스트로 표시되지 않는 내용이 포함되어 있지 않습니다. 소스 코드를 볼 수 있는 사람은 누구나 이 비즈니스 로직을 볼 수 있습니다. 댓글을 없애면 문제가 해결되지 않습니다.

나는 제거를 위한 옵션이 있기를 희망하고 이것을 필터링으로 다시 얻을 수 있습니다.

이런 댓글을 남기는건 좋은 생각이 아닌거 같아요

필터를 적용하고 ul li를 다시 사용해야 하는 경우 이 시간에 댓글이 달린 li 값이 다시 표시됩니다.

@ManishLSN , 무슨 말인지 잘 모르겠습니다. li 댓글이 없습니다. 그냥 평범한 HTML 주석입니다.
즉, debug info 가 비활성화되었을 때 빈 주석을 갖는 것이 합리적이라고 생각합니다(주석의 내용은 "디버깅 가능성" 이외의 다른 용도로 사용되지 않음).

WDYT @Narretz , @lgalfaso ?

_{다시(이 문제를 제기한 사람들의 경우) 이는 보안에 영향을 미치지 않습니다 .}

DOM에 주석 노드가 있어야 합니다. 그렇지 않으면 Angular가 작동하지 않습니다.
debugInfo가 비활성화된 경우 주석 텍스트를 제거하는 아이디어를 구현할 수 있습니다. 이것은 상당히 간단한 변경입니다. 홍보 누구?

감사 해요 !!!

@codetrash 이것은 닫혀 있고 인스펙터로부터 로직을 "숨기기"에 좋다고 생각합니다. 그러나 이전에 언급했듯이 일반 HTML 및 JS는 브라우저에 제공되므로 더 안전한 것으로 간주되어서는 안 됩니다. 이것은 2.0과 함께 서버 측 각도를 사용하여 훨씬 더 잘 보호될 수 있습니다. 어쨌든 내가 볼 수 있는 유일한 "위험한 상황"은 그들이 인스펙터에서 값을 변경할 수 있고 할 수 없어야 하는 데이터를 보거나 저장할 수 있다는 것입니다. 첫 번째 장소. 민감한 데이터가 사용자에게 숨겨져야 하는 경우 서버에서 중요한 데이터를 보내는 것은 좋지 않은 관행으로 간주되어야 합니다. 공개적으로 사용 가능한 것으로 간주됩니다.

Akuno의 흥미로운 사용 사례입니다. 그 이유를 설정할 수 있습니다
불만스러운.

실제로도 특정 요소를 필터링하고 싶을 것입니다.
비 각도 시나리오. 프레임, 댓글 등

구현해야 할 더 많은 작업, 예, 더 깨끗하고 제어 가능한 파이프라인
한 형식과 다른 형식 사이에 있는 것이 좋습니다.
2016년 3월 25일 오전 2시 55분에 "akunno" [email protected]이 작성했습니다.

나는 비슷한 배에 있기 때문에 이것을 올바르게 이해하고 있기를 바랍니다.

현재 내 dom에는 다음과 같은 많은 의견과 이미지가 포함되어 있습니다.

요소의 부모에서 innerHTML을 호출하면 결국
이와 같이:

ng-src="data:image/gif;base64,....">

각도 지시문 없이 HTML을 추출하는 방법을 모르겠습니다.
전달하기 때문에 각도없이 렌더링 된 HTML을 추출하려고합니다.
이것을 워드 문서를 생성하는 변환기로 변환합니다. 현재 단어
문서에는 아직 시도 중이기 때문에 빨간색 X가 있는 이미지 태그가 많이 포함되어 있습니다.
이미지를 마치 이미지인 것처럼 렌더링합니다. 댓글도 엄청나게 달다.
문자열의 크기를 늘립니다.

댓글을 삭제하려고 시도했지만 여전히 방법을 찾을 수 없습니다.
각도 지시문이 오염시키지 않고 렌더링된 HTML을 추출합니다.
이상적으로는 innerHTML을 호출할 때 보고 싶었습니다. 만약
ngIf가 true이거나 아무 것도 아닌 경우(ngIf가 false를 반환한 경우)

나는 이것을 올바르게 이해하고 있고 이것이 방법에 대해 +1이되기를 바랍니다.
어떻게 든 주석/지시문 없이 렌더링된 출력을 추출합니다.

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/angular/angular.js/issues/8722#issuecomment -201172995

또 다른 사용 사례: https://css-tricks.com/almanac/selectors/e/empty/ 가 작동하도록 css:empty pseudo에 대한 구성으로 줄 바꿈을 건너뛰십시오

@mashpie 는 지금 막 동일한 사용 사례를 발견했습니다. 우연의 일치입니다.

Angular는 마커 주석 주위에 줄 바꿈을 추가하지 않습니다. http://plnkr.co/edit/z1rJZd7yU0TYZmDAynTh?p=preview 참조

사용하여 그렇게 할 수 있습니다.

app.config(['$compileProvider', 함수($compileProvider) {
// 디버그 정보 비활성화
$compileProvider.debugInfoEnabled(거짓);
}]);

@RHanmant 이것은 주석을 완전히 제거하는 것이 아니라 주석에서 변수/속성 이름만 제거합니다. 의견이 필요합니다.

#mydiv > div:last-child 와 같은 CSS 규칙을 사용하려고 할 때 이 문제 보고서에 왔는데 마지막 자식이어야 하는 div가 이후에 angularjs 주석 때문이 아니었습니다.

CSS 선택기는 주석을 무시하므로 설명된 일이 발생할 수 없습니다.

나는 그것에 대한 옵션이 있기를 바랍니다.

이런 댓글을 남기는건 좋은 생각이 아닌거 같아요
<!-- ngIf: transaction.status==9 && transaction.status!==8 -->

예, 모든 사람은 개발자가 값을 하드코딩하는 대신 일부 상수를 추가하기에는 너무 게으르다는 것을 알 것입니다. :)
그리고 예, 약간의 공개가 있습니다(프론트엔드에 있기 때문에). 그러나 철저하게 백업을 삭제하면 아무도 이 "유출된" 정보를 악용하지 않을 것입니다. 그래서 그 부분에 집중해야 한다고 생각합니다.