Freecodecamp: Code Locked / Unlocked 버튼은 초보자에게 혼란스러운 UX입니다.

@tchaffee 보고서에 감사드립니다. https://github.com/freeCodeCamp/freeCodeCamp/issues/16250 찬성으로 마무리

@raisedadead Issue # 16250은 다른 문제를 설명합니다. 내 관심사는 코드가 실행하기에 안전한지 여부를 초보자가 어떻게 알 수 있습니까? 초보자가 결정을 내릴 수있는 정보가 없기 때문에 사용자 경험이 나쁩니다.

좋아요 ... 이것은 탑승을 위해 단계적인 도전이 필요하다는 것을 의미합니다.

@QuincyLarson 염두에두고있는 것이 있습니까?

아니면 처음에이 요구 사항을 어떻게 제공했는지 다시 살펴 볼까요? 로컬 저장소에서 코드를 실행할 위험이 있습니까? URI에 코드가없는 경우에도 경고가 표시되며, 저장 한 작업 일 뿐이므로 불필요한 경고처럼 보입니다.

이 사용 사례의 배경을 모르지만 URI의 코드가 공유를위한 것이라고 생각합니까? 그게 진짜 보안 위험이라고 생각 해요?

초보 프로그래머에게 코드가 실행하기에 안전한지 결정하도록 요청하는 대신 코드 공유를위한 또 다른 솔루션을 고려할 수 있습니다. 먼저 기존 솔루션이 제공하는 것과 현재 솔루션으로 이어지는 요구 사항을 이해하는 것이 가치가 있다고 생각합니다. 또는 URI를 통해 코드를 공유하는 것이 좋지 않은 생각 일 수도 있습니다.

아니면 처음에이 요구 사항을 어떻게 제공했는지 다시 살펴 볼까요? 로컬 저장소에서 코드를 실행할 위험이 있습니까? URI에 코드가없는 경우에도 경고가 표시되며, 저장 한 작업 일 뿐이므로 불필요한 경고처럼 보입니다.

요구 사항은 잘 확립되어 있습니다. 프로덕션에서 몇 가지 XSS 문제를 해결해야했습니다. 가장 최근에는 공유를 완전히 차단해야했습니다. 안전하지 않은 코드를 실행하는 방법에 대한 몇 가지 벡터가 있습니다.

예를 들어 사용자는 어디에서나 붙여 넣기 코드를 복사 할 수 있으며 실제로 이로 인해 이러한 문제가 발생할 수 있습니다. 현재 수정은 이러한 벡터를 방지하지 않지만 기술적으로 경고와 함께 모든 실행을 제한합니다. 물론 주변의 UX는 관심사이므로 학습 경로가 필요합니다.

초보 프로그래머에게 코드가 실행하기에 안전한지 결정하도록 요청하는 대신 코드 공유를위한 또 다른 솔루션을 고려할 수 있습니다.

물론입니다. 자유롭게 살펴 보시고 기본적으로 실행에 대한 인프라 수준의 블록 인 현재 수정 사항을 보완하는 솔루션을 갖고 싶습니다. 물론 관심이 있으시면 PR을 통해 도움을받을 수 있습니다.

또는 URI를 통해 코드를 공유하는 것이 좋지 않은 생각 일 수도 있습니다.

우리는 계획된 쓰레기통을 가지고 있지만, 인프라를 준비하고 있기 때문에 곧 일어나지 않습니다. https://github.com/freeCodeCamp/freeCodeCamp/issues/11263 참조

사용자가 유일한 모델이고 DB를 경량으로 유지해야했을 때 점진적으로 더 분리 할 계획입니다.

요구 사항은 잘 확립되어 있습니다.

어느 것? 로컬 저장소에서 코드를 가져 오는 것이 요구 사항 중 하나 라는 것을 알고 있습니다. 그것은 나에게 의미가 있습니다. 캠프 참가자들은 그들이 작업하기 시작한 코드를 잃어서는 안됩니다.

URI에서 코드를 실행하기위한 또 다른 요구 사항이 있습니까? 나는 그것에 대해 많이 알지 못합니다. 단지 몇 주 전에 보았던 보안 문제에서 종을 울립니다.

두 가지 목표와 보안 위험이 다른 두 가지 요구 사항처럼 보입니까?

자유롭게 살펴 보시고 기본적으로 실행에 대한 인프라 수준의 블록 인 현재 수정 사항을 보완하는 솔루션을 갖고 싶습니다.

나는 보안 전문가는 아니지만 요구 사항을 더 잘 이해할 수 있다면 무언가를 생각해 낼 수있어 기쁩니다. 누군가가 Camper의 관점에서 모든 요구 사항과 최신 변경 사항이 수정하려고 시도한 보안 허점을 자세히 설명 할 수 있습니까? 또한 "인프라 레벨 블록"이란 무엇입니까?

계획된 쓰레기통이 있습니다.

이 문제는 그 솔루션이 무엇인지 이해할 수있을만큼 자세히 설명하지 않습니다. "통"이 무엇이며 계획된 솔루션이 무엇인지에 대해 자세히 설명해 주시겠습니까?

어쨌든 나는 이것을 실제보다 더 큰 것으로 만들고 싶지 않습니다. 온 보딩을위한 단계적 도전 이 현재로서는 올바른 해결 방법 일 수 있습니다. 하지만 온 보딩이 어떤 모습 일지 정말 궁금합니다. 어떤 코드를 신뢰해야하고 어떤 코드를 믿지 말아야하는지 처음부터 Campers에게 가르치는 것이 가능합니까? 마음에 드는 것이 있다면 제가 상상하는 것보다 더 간단 할 수도 있기 때문에보고 싶습니다.

프로젝트의 아키텍처에 대한 호기심에 감사드립니다. 귀하의 모든 질문에 확실히 답하고 싶지만이 스레드의 모든 내용을 설명하는 것만으로는 충분하지 않거나 정당화되지 않을 것입니다.

나는 당신이 이것을 시작할 가능성이 있다는 것을 이해하므로 가능한 한 명확하게하려고 노력할 것이지만 명확하지 않은 것이 있으면 쿼리를 삭제하십시오.

이 쿼리를 사용하여 컨텍스트를 제공하려고합니다.

누군가가 Camper의 관점에서 모든 요구 사항과 최신 변경 사항이 수정하려고 시도한 보안 허점을 자세히 설명 할 수 있습니까? 또한 "인프라 레벨 블록"이란 무엇입니까?

• 첫째, 프로덕션 (freeCodeCamp.org) 및 클라이언트 측의 스테이징 (beta.freeCodeCamp.org)에서 코드를 평가하고 실행하는 방법에 큰 차이가 있습니다. 그것에 대해 논의하는 것은 범위를 벗어난 것이므로 코드를 살펴보면서 조언을 드리겠습니다. 그러나 프로세스에 대한 조감도를 제공하기 위해 편집기에서 코드를 가져 와서 브라우저의 컨텍스트에서 실행 ( eval , refer code 사용 )하는 방법은 매우 다릅니다.

• 이제 야영 자의 관점으로갑니다. 캠핑카로서 할 모든 시나리오를 상상해보십시오.

  • 편집기에서 코드 편집을 시작할 수 있습니다.
  • 편집기에 코드를 붙여 넣을 수 있습니다.
  • 부분적으로 편집하고 다른 챌린지로 이동 한 후 돌아올 수 있습니다.
  • 다른 사람의 프로필을 방문하거나 솔루션보기 링크를 클릭하거나 포럼 등의 링크를 클릭 할 수 있습니다. 그렇지 않으면 URI라고도합니다.
  • 당신은 ...
    또는 위의 조합도 가능합니다.
• 모든 경우에 코드가 구문 분석되고 평가되는 동일한 편집기에 도달합니다.
• 이 구문 분석은 입력 된 코드, 로컬 저장소 또는 URI에서 발생할 수 있습니다.

• 모든 경우에 무한 루프 보호, DB로 보내기 전에 솔루션을 인코딩하는 동안 태그를 스트라이핑 및 / 또는 교체하는 등 일부 안전 검사가 수행됩니다.

• 아니. 여러 공격 벡터를 처리하기에는 정말 복잡합니다.

• 그것은 단지 보안입니다.

• 그런 다음 워크 플로가 나타납니다.

  • 로컬 스토리지는 DB에 충돌하지 않고 작업을 "자동 저장"하는 방법이 필요합니다.
  • 제출 및 통과 된 솔루션 만 DB로 이동해야하기 때문입니다.
  • 부분 솔루션 (편집 또는 복사-붙여 넣기), 즉 (제출 됨 + 통과 또는 작업 중 아님)은 로컬 저장소에 있어야합니다.
  • 또한 DB와 로컬 스토리지 간의 트랜잭션 (공유 / 뷰잉 URI)은 앞서 언급 한 이유로 인코딩 / 디코딩해야합니다.

여기서 트랜잭션이란 사용자가 자신의 프로필 또는 다른 곳에서 공유 링크를 클릭하기 때문에 편집기에 코드가있는 상태에 도달하는 것을 의미합니다.

평가를 위해 솔루션을로드하는 우선 순위는 Editor > Local Storage > URI/DB

시나리오와 워크 플로를 비교하면 공격 벡터를 막 으면서 로직이 얼마나 복잡해 지는지 더 많이 알 수 있습니다.

따라서 총괄 검사는 코드 잠금 해제 방법을 통해 명시적인 동의없이 모든 문제에 대해 편집기에서 아무것도 실행하지 않는 것입니다. 이것이 제가 취하고있는 인프라 레벨 블록입니다. 브라우저의 격리 된 환경에서 모든 코드를 안전하게 실행할 수있는 안전한 방법이있을 때까지는이 방법이 없습니다.

UX에 좋지 않을 수 있다는 데 동의합니다. 따라서 온 보딩은 너무 복잡하지 않고 새로운 사용자를 두려워하지 않고 왜 이것이 필요한지 보여주는 방법이 될 수 있습니다.

마지막으로, 저장소는 짧은 링크 와 비슷한 것입니다. 예 : codepen, jsbin 등. 참고 : 여기서는 아이디어를 단순화하고 있습니다.

이것들은 현재 우선 순위 오버 헤드없이 코드를 안전하게 저장 /보기하는 데 도움이 될 수 있습니다.

그래서,

실제 UX 수정은 온 보딩 챌린지에서 단순히 경고를 설명하는 것입니다.

여기에 단순화 된 내용이있을 수 있습니다. 관심이 있으시면 코드를 확인하시기 바랍니다. 막히면 우리는 그 전면에 대한 이해를 다룰 수 있습니다. 그러니 여기에 질문이 있으시면 입력 해주세요.

다시 반복하기 위해 :

1. 예, 여러 요구 사항이 있지만 모두 실행 / 평가 및보기에 대해 동일한 진입 점이 있습니다. 따라서 잠금 / 잠금 해제가 필요합니다. 모두 동일한 보안 위험을 초래합니다.
2. 이것은 현재 코드의 모든 수신 경로를 평가 메커니즘으로 일괄 검사하는 것입니다.
3. 우리는 분명히 UX를 학습의 어떤 형태로 다룰 필요가 있습니다.

어떤 코드를 신뢰해야하고 어떤 코드를 믿지 말아야하는지 처음부터 Campers에게 가르치는 것이 가능합니까? 마음에 드는 것이 있다면 제가 상상하는 것보다 더 간단 할 수도 있기 때문에보고 싶습니다.

1. 이 문제에 대한 해결책을 위해 만든 코드 (수동으로 입력하거나 다른 편집기에서 복사 / 붙여 넣기)는 신뢰할 수 있습니다.

2. 다른 사람이 만든 코드 (자신의 프로필 링크 포함)는 신뢰할 수 없으며 한 번 검토해야합니다. 그들은 간단하게 에디터의 솔루션이 그들에게 맞는지 확인할 수 있습니다. 왜냐하면 그들이 어떤 코드라도 이해하지 못한 채 임의의 코드를 잠금 해제하는 경우에는 가능한 보안 안전 장치를 위험에 빠뜨릴 수 있기 때문입니다.

위의 두 가지 사항에 대한 말을 준비하고 온 보딩 챌린지를 만들면됩니다.

이것이 당신에게 어떤 맥락을 제공하기를 바랍니다. 그렇지 않은 경우 언제든지 더 많은 쿼리를 추가하십시오. 기부 해 주셔서 감사합니다!

@raisedadead 자세한 설명은 많은 도움이됩니다. 더 많은 질문 / 관찰이있어 장 단기적으로 최상의 구현을 할 수 있기를 바랍니다.

편집기에서 코드를 가져 와서 브라우저의 컨텍스트에서 실행합니다 (eval 사용

이것이 보안 문제를 일으키는 약점입니다. 나는 그것이 피할 수 있다고 말하는 것이 아니라 누군가가 동일한 기능을 제공하는 더 안전한 방법을 생각해 냈을 경우를 대비하여 브레인 스토밍해야한다는 점에 주목합니다. 하루가 끝나면 코드를 실행해야하기 때문일 수 있습니다. 그러나 그것에 대해 열린 마음을 유지합시다. 주변에 물어 볼게요.

기능 및 요구 사항을 좀 더 자세히 살펴 보겠습니다.

부분 솔루션 (편집 또는 복사-붙여 넣기), 즉 (제출 됨 + 통과 또는 작업 중 아님)은 로컬 저장소에 있어야합니다.

이 문제에 대한 해결책을 위해 만든 코드 (수동으로 입력하거나 다른 편집기에서 복사 / 붙여 넣기)는 신뢰할 수 있습니다.

위의 로컬 스토리지의 코드처럼 나에게 보이는에서 신뢰할 수 있어야하지만, 신뢰되지 않습니다. URI (확실히 신뢰할 수 없음)에서 가져온 코드와 이전에 입력 한 코드 중 로컬 저장소에서 가져온 코드를 구분하는 방법이 있습니까? 그 작은 변화만으로도 UX가 훨씬 좋아질 것입니다. 특히 메시지를 훨씬 더 구체적으로 만들 수 있었기 때문에 "코드가 포함 된 URI를 사용했습니다. 코드를 신뢰하십니까?"

URI에서 오는 코드 만 감지하고 신뢰하지 않는 것이 가능하다면 기존 워크 플로와 기능에 잘 맞을 수 있다고 생각합니다. 코드가 URI에서 오는 경우 사용자가 "코드 잠금 / 잠금 해제?"를 누를 때까지 코드를 로컬 저장소에 저장하지 않습니다. 단추. 그 후 사용자가 코드를 신뢰한다고 표시 했으므로 안전하게 로컬 저장소에 저장 한 다음 나중에 다시 돌아올 때 경고없이 실행할 수 있습니다.

장기적으로는 URI로 코드를 보내는 것이 전반적으로 나쁜 생각인지, 그리고 솔루션과 코드를 공유하는 더 좋은 방법을 찾을 수 있는지 확실히 의문입니다. 그러나 나는 현재 일이 수행되는 방식에 큰 변화가 필요하기 때문에 장기적인 질문을 반복 할 것입니다.

그들은 간단하게 에디터의 솔루션이 그들에게 맞는지 확인할 수 있습니다.

이것은 온 보딩이 효과적 일만큼 간단 할 수 있다고 확신하게되었습니다. "편집기의 코드를 인식하지 못하거나 이해하지 못한다면 신뢰하지 마십시오."

그러나 URI에서 오는 코드와 로컬 저장소의 코드를 구분할 수 있다면 온 보딩이 필요한지 의문도 제기하고 있습니다. 그 상황 에서만 경고하는 것이 나에게 나쁜 UX처럼 보이지 않기 때문입니다. "URI에서 방금 코드를 사용했습니다. 잠금을 해제하기 전에 편집기의 코드가 올바른지 확인하십시오."

@raisedadead 전에 @tchaffee 를 만났 freeCodeCamp 에 많은 기여를했습니다. 그는 경험이 풍부한 개발자이며 새로운 테스트 가능한 프로젝트 의 주역 중 한 명입니다.

좋아요 ... 이것은 탑승을 위해 단계적인 도전이 필요하다는 것을 의미합니다.

우리는 더 많은 단계적 도전을 추가하고 싶지 않습니다. 어쨌든 우리는 우리가 가진 단계적 도전을 없애고 싶습니다.

이것은 사람들이을 읽지 않기 때문입니다.

챌린지 레슨 텍스트를 가능한 간결하게 만들려고하는 이유 중 하나는 텍스트가 많을수록 사용자가 읽을 수있는 인내심이 적기 때문입니다.

@tchaffee 가 맞습니다-우리는 이것의 UX를 개선해야합니다.

다른 사람의 코드가 포함 된 URL을 클릭하여 도전에 도달 한 경우에만 코드를 잠글 것을 제안합니다. 그렇지 않으면 코드 실행에 대해 경고하지 않아야합니다.

JSBin, CodePen,이 사이트 중 어느 것도 사람들에게 이와 같은 다른 사람의 코드를 실행하는 것에 대해 경고하지 않는다고 생각합니다. 나는 우리가 그들에게 경고 할 수 있다고 생각하지만, 그들이 그들의 것이 아닌 코드를 실행하고있을 가능성이있는 상황에서만 가능합니다. 그렇지 않으면 그 버튼을 클릭하는 것은 정말 성 가시고 소모를 증가시킬 것입니다.

편집기에서 코드 편집을 시작할 수 있습니다.

잠금이 필요하지 않습니다.

편집기에 코드를 붙여 넣을 수 있습니다.

잠금이 필요하지 않습니다 (붙여 넣는 코드를 이미 읽었다 고 가정해야합니다).

부분적으로 편집하고 다른 챌린지로 이동 한 후 돌아올 수 있습니다.

잠금 필요 없음

다른 사람의 프로필을 방문하거나 솔루션보기 링크를 클릭하거나 포럼에서 링크를 클릭 할 수 있습니다.

이것은 자물쇠가 필요한 유일한 상황입니다.

또한 호버 메시지가 필요하지 않은 곳으로 다시 말해야합니다. 우리는 코드베이스의 다른 곳에서는 온-호버 메시지를 사용하지 않으며 모바일에서 작동하지 않기 때문에 사용해서는 안됩니다. 사용하려는 모든 텍스트는 버튼 자체에 작성해야합니다.

사용하려는 모든 텍스트는 버튼 자체에 작성해야합니다.

"왜 내 코드가 잠겨 있습니까?"라는 줄을 따라 버튼 아래에 링크를 표시하면 기존 버튼 텍스트가 작동 할 수 있다고 생각합니다. 그냥 제안입니다.

또한 다른 사람이 시간이 없다면이 문제를 해결하려고 노력할 수 있습니다. 모든 관련 코드를 알려주는 누군가에게 도움이 필요합니다. 그러나 더 자격이 있고 기꺼이 누군가가 있다면 확실히 그들이이 문제를 받아들이도록하십시오.

@tchaffee 그거 좋을거야!

링크가있는 대신 버튼이 두 줄로되어 있어도 가능한 한 적은 단어로 설명 할 수있는 간결한 방법을 찾아야합니다. "나는이 코드를 믿습니다. 잠금 해제하십시오."

다시 말하지만, 코드가 캠핑카의 것이 아닐 때만이 버튼이 표시되기를 원합니다.

@QuincyLarson 예, 온 보딩 흐름을 피하고 레이블 만 업데이트하고 싶습니다.

현재 클라이언트 측 로직에 따라 사용자가 아닌 코드 만 차단하는 구현을 구현해야한다는 사실은 여전히 ​​남아 있습니다.

이것은 "I trust this code. Unlock it." 버튼에 대한 논리가 URI 등에서 코드가 나올 때만 표시 될 수 있다는 것을 의미합니다. 여전히 구현해야합니다.

PR을 추가하여 레이블을 업데이트하고 다른 문제는 종료합니다. https://github.com/freeCodeCamp/freeCodeCamp/issues/16250

현재 클라이언트 측 로직에 따라 사용자가 아닌 코드 만 차단하는 구현을 구현해야한다는 사실은 여전히 ​​남아 있습니다.

이것이 새로운 행동을 구현하겠다는 내 제안을 어디로 남겼는지 확실하지 않습니다. 사용자가 아닌 코드 만 차단할 수 있지만 지금이 적절하지 않은 것 같나요? 누군가 명확히 해 주시겠습니까?

수행 할 작업에 대한 매우 구체적인 지침을 제공하기 위해 이것이 어떻게 작동하는지 다시 확인해야하며, 그 동안 @BerkeleyTrue 를 그의 입력에 태그 할 것입니다.

이것은 "I trust this code. Unlock it"버튼의 논리를 의미합니다. 코드가 URI 등에서 온 경우에만 표시 될 수 있도록 구현해야합니다.

@raisedadead 예-동의합니다. 그렇게하는 것은 중요하며 수천 명의 야영 자들의 정신을 구할 것입니다.

베타 릴리스 Kanban의 "중요 경로"로 이동했습니다. https://github.com/freeCodeCamp/freecodecamp/projects/1?fullscreen=true

누군가가 문제의 코드 부분을 가리킬 수 있다면 여전히 기쁩니다. 내가 직접 찾을 수 있다고 확신하지만 누군가 이미 코드에 익숙하다면 시간을 절약 할 수 있습니다. 누군가가 이것의 상태를 알려줄 수 있습니까?

@tchaffee 양해

@Bouncey 이 로직이 코드베이스에서 어디에 있는지 알고 있습니까? @tchaffee 를 올바른 방향으로 가리킬 수 있습니까?

헉

pathnameSelector URI를 확인할 수 있습니다.

SidePanel 구성 요소 의 mapStatetoProps 메서드에 전달하여 사용하면 거기 에서 ToolPanel 구성 요소와 상호 작용할 수 있습니다.

이것이 도움이되기를 바랍니다 👍

저는 이것을보기 시작했고 질문이 있습니다. 누군가가 다음을 수행하는 방법에 대한 예를 들어 줄 수 있습니까?

다른 사람의 프로필을 방문하거나 솔루션보기 링크를 클릭하거나 포럼 등의 링크를 클릭 할 수 있습니다. 그렇지 않으면 URI라고도합니다.

베타 사이트에서는 솔루션에 대한 팝업 만 표시되고 코드를로드하는 URI는 표시되지 않습니다. 베타에서 변경된 것 같습니까? URI에서 코드를로드 할 수있는 다른 위치가 있습니까? 누군가가 예제 URI를 가리킬 수 있습니까?

감사!

@tchaffee 맞습니다.이 사용 사례는 더 이상 유효하지 않습니다.

다른 사람의 프로필을 방문하거나 솔루션보기 링크를 클릭하거나 포럼 등의 링크를 클릭 할 수 있습니다. 그렇지 않으면 URI라고도합니다.

이제 실제로 모달로 대체되어 편집기에서 URI를 구문 분석하는 것보다 훨씬 안전합니다. 그래서 나는 URI에서 로딩이 더 이상 그림에 없다고 생각합니다.

이제 코드 잠금 / 잠금 해제로 이동합니다. 이때 버튼이 표시되어야합니다.

내가 생각할 수있는 몇 가지 시나리오는 다음과 같습니다.

1. 캠프 참가자는지도에서 도전을 다시 방문 할 수 있습니다.
2. 이 경우 코드는 사용 가능한 경우 로컬 저장소에서 편집기에로드됩니다.
3. 또는 백엔드에서 가져 와서 로컬 저장소에 추가 한 다음 편집기에 배치합니다.

이제 이상적인 세계에서는이 코드가 캠핑카 소유인 경우가 될 것입니다.

그러나 가능성이 무엇이든 편집기에로드되고 실행되는 것은 코드입니다. 이로 인해 안전하지 않은 코드가 실행될 수있는 장소가 생깁니다. 적어도 그것은 제가 볼 수있는 벡터입니다.

따라서 우리는 Camper가 실행해야 할 작업을 인식하고 명시적인 동의를 얻어야합니다.

따라서 로컬 저장소 또는 백엔드 (비 사용자 코드)에서 코드를 차단하는 부분은 여전히 ​​남아 있습니다. 그러나 버튼이 있으면 불필요하다고 생각합니다.

원래 시드 코드가 아니거나 캠핑카가 입력 한 코드 (사용자 코드)가 아닌 경우 실행되지 않는 비 사용자 코드를 잠글 수 있어야합니다.

@Bouncey @BerkeleyTrue 이보기에서 내가 맞습니까?

아, 그렇습니다. URI 구문 분석이 여전히 사용 가능하며, 챌린지 편집기가 솔루션에 대한 모달이있는 반응 프로필보기가 있다는 사실을 알지 못하기 때문에 아무데도 가지 않습니다.

시간이 있으면 예제 URI를 공유해 보겠습니다.

그러나 가능성이 무엇이든 편집기에로드되고 실행되는 것은 코드입니다. 이로 인해 안전하지 않은 코드가 실행될 수있는 장소가 생깁니다.

나는 그렇지 않다고 말할 것입니다. 캠프 참가자가 다른 곳에서 코드를 복사 / 붙여 넣는 경우 코드를 이해하고 코드가 안전한지 확인해야합니다. 이 접근 방식은 또한 정직함을 보상하고 부정 행위를 처벌합니다. 복사 된 코드가 무엇인지 이해하지 못하는 경우 붙여 넣으면 안됩니다. 당신이 그것을 이해하지 못한다면 당신은 분명히 그것을 스스로 쓸 수 없었을 것이므로 당신이 야기하는 모든 피해는 실제 부정 행위의 결과입니다.

처음에 코드를 편집기로 가져 오는 "정직한"방법은 두 가지뿐입니까?

1. 이해하고 직접 작성할 수있는 내용을 복사 / 붙여 넣기하십시오.
2. 코드를 직접 입력하십시오.

어느 시점에서 로컬 저장소 또는 백엔드에 저장됩니까?

로컬 저장소 또는 백엔드에서 가져와 편집기에 배치 된 모든 코드는 먼저 위의 방법 중 하나에서 가져와야합니다. 따라서 로컬 저장소 또는 백엔드의 코드는 항상 안전한 것으로 취급 될 수 있습니다.

원래 시드 코드가 아니거나 캠핑카가 입력 한 코드 (사용자 코드)가 아닌 경우 실행되지 않는 비 사용자 코드를 잠글 수 있어야합니다.

위의 IMO는 필요하지 않습니다.

URI 구문 분석은 여전히 ​​사용 가능하며, 챌린지 편집기는 솔루션에 대한 모달이있는 반응 프로필보기가 있다는 사실을 알지 못하기 때문에 아무데도 가지 않습니다.

이것이 제가 생각할 수있는 유일한 안전하지 않은 벡터입니다. 예를 들어 주시면이를 감지하고이 경우에만 "잠금 해제"버튼을 표시하겠습니다.

물론 내가 뭔가를 놓친 경우 수정하십시오.

예, 귀하가 언급하는 처음 두 가지 사항은 코드 잠금에 대한 가장 낮은 시나리오이며 동의합니다. 이상적으로는 차단해야합니다. 비용이 많이 드는 일입니다.

어느 시점에서 로컬 저장소 또는 백엔드에 저장됩니까?

편집기에서 코드를 사용할 수있는 즉시 저장됩니다. 따라서 복사 붙여 넣기 및 입력이 여기에 포함됩니다.

이것이 제가 생각할 수있는 유일한 안전하지 않은 벡터입니다. 예를 들어 주시면이를 감지하고이 경우에만 "잠금 해제"버튼을 표시하겠습니다.

이것은 처리해야 할 유일한 경우입니다. 그리고 이것은 현재로서는 우선 순위가 아닙니다. 이에 대한 사용 사례는 URI를 통해 타사 통합에서 웹 앱으로 제공되는 솔루션이있는 경우입니다.

그래서, 검사가 제자리에 있으면 충분합니다. 그리고 당신이 올바르게 알아 낸대로 우리는 이것만을 지능적으로 차단해야합니다.

최대한 빨리 예제 URI를 공유하겠습니다. (스튜어트가 가능하다면 저를 이길 수 있습니다.)

@raisedadead 설명에 감사드립니다. 사용자가 처음 챌린지를로드하고 URL에 코드 매개 변수가있을 때만 버튼을 잠 가야한다는 데 동의합니다. 다른 모든 상황에서는 코드를 잠그면 안되며 사용자가 버튼을 클릭하거나 ctrl + enter를 처음 누를 때 코드를 실행해야합니다.

누군가가 URL에있는 코드의 예를 제공하는 즉시 작업을 시작할 수 있습니다.

@tchaffee 여기서 URI

다음과 같이 if 블록에서 코드를 잠그는 작업을 전달할 수 있습니다.

return Observable.of(
  makeToast({
    message: 'I found code in the URI. Loading now.'
  }),
  storedCodeFound(challenge, finalFiles),
  // lockTheCodeAction()
);

작업 할 코드 URI를 얻을 수있을 때까지 생산성을 유지해야합니다.

@tchaffee URL 예는 다음과 같습니다. http : // localhost : 3000 / challenges / Check % 20for % 20Palindromes? solution = function % 20palindrome (str) % 20 % 7B % 0A % 20 % 20str % 20 % 3D % 20str.toLowerCase () .replace (% 2F % 5B % 5CW_ % 5D % 2Fg % 2C % 20 % 27 % 27) % 3B % 0A % 20 % 20for (var % 20i % 20 % 3D % 200 % 2C % 20len % 20 % 3D % 20str.length % 20- % 201 % 3B % 20i % 20 % 3C % 20len % 2F2 % 3B % 20i % 2B % 2B) % 20 % 7B % 0A % 20 % 20 % 20 % 20if (str % 5Bi % 5D % 20! % 3D % 3D % 20str % 5Blen-i % 5D) % 20 % 7B % 0A % 20 % 20 % 20 % 20 % 20 % 20return % 20false % 3B % 0A % 20 % 20 % 20 % 20 % 7D % 0A % 20 % 20 % 7D % 0A % 20 % 20return % 20true % 3B % 0A % 7D

그러면 http : // localhost : 3000 / challenges / check-for-palindromes URL로 연결되고 다음 코드가 채워집니다.

function palindrome(str) {
  str = str.toLowerCase().replace(/[\W_]/g, '');
  for(var i = 0, len = str.length - 1; i < len/2; i++) {
    if(str[i] !== str[len-i]) {
      return false;
    }
  }
  return true;
}

@QuincyLarson 감사합니다. 내 작업을 테스트 할 수없는 상태에서 작업을 시작하는 것이 주저했습니다. 나는 이것을 곧 볼 시간을 할애 할 수있다.

트윗 담아 가기 도와 드릴 수있어서 기쁩니다. 차단 해제 상태를 유지하기 위해 다른 조치를 취할 수 있는지 알려주세요. :)

내가 사용해야하는 실제 URL은 http : // localhost : 3000 / en / challenges / javascript-algorithms-and-data-structures-projects / palindrome-checker? solution = function % 20palindrome (str) % 20 % 7B % 0A입니다. % 20 % 20str % 20 % 3D % 20str.toLowerCase (). replace (% 2F % 5B % 5CW_ % 5D % 2Fg % 2C % 20 % 27 % 27) % 3B % 0A % 20 % 20for (var % 20i % 20 % 3D % 200 % 2C % 20len % 20 % 3D % 20str.length % 20- % 201 % 3B % 20i % 20 % 3C % 20len % 2F2 % 3B % 20i % 2B % 2B) % 20 % 7B % 0A % 20 % 20 % 20 % 20if (str % 5Bi % 5D % 20! % 3D % 3D % 20str % 5Blen-i % 5D) % 20 % 7B % 0A % 20 % 20 % 20 % 20 % 20 % 20return % 20false % 3B % 0A % 20 % 20 % 20 % 20 % 7D % 0A % 20 % 20 % 7D % 0A % 20 % 20return % 20true % 3B % 0A % 7D

문서화를 위해 여기에 넣으십시오. 댓글을 달 필요가 없습니다.

@Bouncey 액션을 전달하는 기존 코드를

확실한

구성 요소 내에서

서사시의 단일 액션

하나의 서사시에서 여러 액션

이것이 도움이되기를 바랍니다 : +1 :

즐거운 코딩 되세요!

이 모든 잠금 / 잠금 해제는 코드를 샌드 박싱하는 측면에서 가장 좋은 생각이 아니라고 생각합니다. 대신 Camper의 세션과 상호 작용할 수있는 방법이 없는지 확인하려면 다른 출처의 iframe에서 코드를 평가해야한다고 생각합니다.

(제외이지만 약간 관련이 있음) : 잠재적 인 보안 문제를 freeCodeCamp에보고하는 데 선호되는 방법은 무엇입니까?

@ joker314 [email protected] 로 이메일을 보내주세요.

이 문제는 문제 # 16904에 의해 차단되었습니다.

이 문제는 최근에 활성화되지 않았기 때문에 오래된 문제로 마감하겠습니다. 이것이 새로 업데이트 된 플랫폼과 여전히 관련이 있다고 생각되면 이유를 설명하고 다시여십시오.