boycgit.github.io/charles-proxy-https/index.html at master · boycgit/boycgit.github.io

History

621 lines (515 loc) · 31.5 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

612

613

614

615

616

617

618

619

620

621

<!DOCTYPE html><html lang="zh">

<head>

<title>【经验总结】charles + SwitchyOmega 代理 https</title>

这两天为了debug，不得不代理 https 的请求，经过半天的折腾竟然成功了。为了让以后自己不那么费劲，就写了这篇文章总结。">

这两天为了debug，不得不代理 https 的请求，经过半天的折腾竟然成功了。为了让以后自己不那么费劲，就写了这篇文章总结。">

这两天为了debug，不得不代理 https 的请求，经过半天的折腾竟然成功了。为了让以后自己不那么费劲，就写了这篇文章总结。">

{

"@context": "https://schema.org",

"@type": "Article",

"publisher": {

"@type": "Organization",

"name": "JSCON-简时空",

"logo": "https://boycgit.github.io/content/images/2018/08/logoicon.png"

"author": {

"@type": "Person",

"name": "boycgit",

"image": {

"@type": "ImageObject",

"url": "//www.gravatar.com/avatar/8b26b02c66a0e37c2183431d58502c25?s=250&d=mm&r=x",

"width": 250,

"height": 250

"url": "https://boycgit.github.io/author/boycgit/",

"sameAs": []

"headline": "【经验总结】charles + SwitchyOmega 代理 https",

"url": "https://boycgit.github.io/charles-proxy-https/",

"datePublished": "2018-11-06T06:36:46.000Z",

"dateModified": "2019-06-18T08:07:52.000Z",

"image": {

"@type": "ImageObject",

"url": "https://images.unsplash.com/photo-1508416163602-e4eb39645e86?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ&s=df89fd00920df727218842cce7113c14",

"width": 1080,

"height": 717

"keywords": "经验总结, 计算机网络, 软件",

"description": "为了能让 Charles 代理 HTTPS，之前到网上看了很多教程，曾经自己捣鼓过，不过一直都没能成功，索性就不弄了。\n\n这两天为了debug，不得不代理 https 的请求，经过半天的折腾竟然成功了。为了让以后自己不那么费劲，就写了这篇文章总结。",

"mainEntityOfPage": {

"@type": "WebPage",

"@id": "https://boycgit.github.io/"

}

</script>

ghost.init({

clientId: "ghost-frontend",

clientSecret: "7c2ea2eb9409"

});

</script>

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', 'UA-69473481-3');

</script>

<style>

/* 结束 */

.end-block-wrap{

color:#338daf;

text-align: center;

}

.end-block-wrap img{

border: none;

max-width: 100%;

margin: 0px auto; display: inline-block;

}

.end-block-wrap img.main{

width: 30px;

}

/* 参考文档 */

.ref-wrap .line-text{

display: flex;justify-content:center;align-items:flex-end;

}

.ref-wrap .line-text::before, .ref-wrap .line-text::after{

content: '';

display: inline-block;

width: 25%; border-bottom: 1px dashed rgb(51, 51, 51); box-sizing: border-box;

}

.ref-wrap .text.main{

font-size: 14px;

color: rgb(0, 0, 0);

letter-spacing: 1.5px;

padding: 0px 10px;

font-weight: bold;

margin-bottom: -5px;

box-sizing: border-box;

}

.ref-wrap .text.second{

font-size: 16px;

color: rgb(0, 0, 0);

letter-spacing: 1.5px;

padding: 10px;

text-align: center;

box-sizing: border-box;

}

/* 求关注 */

.qr-wrap{

margin-right: auto;

margin-left: auto;

width: 360px;

border: none rgb(255, 129, 36);

background: url(https://mpt.135editor.com/mmbiz_gif/ziadDDQxbCJFA2XMwm7VE1RTcS94u8LqVWSjIasMfzY8aG5HolkBhHhwEp0eUpPCEzPYqXYicbRNtROJibbM9P55g/0?wx_fmt=gif) right 0px no-repeat;

background-size: contain;

box-sizing: border-box;

}

.qr-image{

padding: 10px 3px;

width: 150px;

display: inline-block;

box-sizing: border-box;

}

.qr-image img{

width: 150px;

}

</style>

</head>

</ul>

</div>

</div>

</a>

</div>

</nav>

</div>

</header>

<time class="post-full-meta-date" datetime="2018-11-06">6 November 2018</time>

</section>

<h1 class="post-full-title">【经验总结】charles + SwitchyOmega 代理 https</h1>

</header>

</figure>

<p>为了能让 Charles 代理 HTTPS，之前到网上看了很多教程，曾经自己捣鼓过，不过一直都没能成功，索性就不弄了。</p>

<p>这两天为了debug，不得不代理 https 的请求，经过半天的折腾竟然成功了。为了让以后自己不那么费劲，就写了这篇文章总结。</p>

<ul>

<li>charles 版本：4.2.6</li>

<li>chrome 版本： 70.0.3538.77（正式版本）</li>

<li><a href="https://chrome.google.com/webstore/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif">SwitchyOmega</a> 版本：2.5.20</li>

</ul>

<p>安装成功后，能在系统 <strong>钥匙串访问</strong> 中找到所安装的证书：</p>

<p>此时证书有可能是不被信任的状态，我们通过双击将其更改成 <strong>始终信任</strong>：</p>

<p>在 Charles 中配置代理规则：</p>

<h2 id="3">3、设置代理规则</h2>

<p>将 charles 中的代理规则复写到 SwitchyOmega 的匹配规则里：</p>

<p>为了让 https 生效，需选择 <strong>Socket5</strong> 代理协议，端口填写 <code>8889</code></p>

</blockquote>

<p>上述 3 步操作已经完成 charles 的代理工作，剩下的就是对请求进行开启代理。</p>

<p>以访问百度（<a href="https://www.baidu.com">https://www.baidu.com</a>）为例，打开 charles 后捕获到的请求如下：</p>

<p>注意截取的请求内容都是 <code><unknown></code>，而且图标是一个 <strong>加锁</strong> 的图标。</p>

<p>通过右键 <strong>Enable SSL Proxying</strong>，让我们开启对百度首页的 HTTPS 代理：</p>

<p>再次访问百度首页，就能看到请求现在成功被代理了，图标也从加锁状态变更成 <strong>互联网</strong> 图标了：</p>

<p>注意，如果你通过右键 <strong>Enable SSL Proxying</strong> 后，刷新提示的是链接不安全：</p>

<p>那么也不需要担心，有可能是证书安装失效导致的，<strong>将证书删除后重新安装一遍，就能解决了</strong>。（参考第一步的操作）</p>

<p>上述我们通过 <strong>Enable SSL Proxying</strong> 针对每个网站开启 SSL 代理，其实就是添加了一条匹配规则而已：</p>

<p>我们还可以使用通配符，比如对淘宝域名下的页面都开启 SSL 代理：</p>

<p>这样访问淘宝页面后，就能看到 <code>*.taobao.com</code> 的资源进行代理了：</p>

<ul>

<li><a href="https://segmentfault.com/a/1190000005070614">mac环境下使用Charles抓包Https请求</a>：包含了 mac 和 ios 端对 https 抓包的支持</li>

<li><a href="http://www.jianshu.com/p/a0215dd2047f">HTTP/HTTPS抓包工具Charles</a>：主要看一下如何设置 HTTPS 抓包</li>

</ul>

</div>

</section>

<p style="text-align: center">下面的是我的公众号二维码图片，欢迎关注，及时获取最新技术文章。</p>

<h4 class="author-card-name"><a href="../author/boycgit/">boycgit</a></h4>

<p>阅读此作者的<a href="../author/boycgit/">更多文章</a>.</p>

</section>

</div>

</footer>

</article>

</div>

</main>

<small class="read-next-card-header-sitetitle">— JSCON-简时空 —</small>

</header>

</div>

<ul>

<li><a href="../debugging-with-ts-jest/">在 ts + Jest 单元测试中 debugging</a></li>

<li><a href="../customize-antd-css/">快速定制 Ant Design 主题 CSS 文件</a></li>

<li><a href="../webpack-alias-main-fields/">Webpack 技巧 - 联合 alias 和 mainFields 提高多库联调效率</a></li>

</ul>

</div>

</footer>

</article>

</a>

<h2 class="post-card-title">Webpack 踩坑记 - 配置 externals 和 output</h2>

</header>

<p>webpack 很强大，但学习成本也跟着上去了，其中一件让人头疼的是输出时的配置，特别容易让人迷惑；本文总结了自己开发库时依赖共同第三方包时的 externals 和 output 配置项。</p>

</section>

</a>

boycgit

</div>

</li>

</ul>

<span class="reading-time">阅读耗时约 6 分钟</span>

</footer>

</div>

</article>

</a>

<h2 class="post-card-title">前端学数据结构 - 堆（Heap）</h2>

</header>

<p>前端学数据结构系列 - 堆（heap）。本文收集了堆的参考文章、代码实现和实际应用等等，通过本文能基本掌握堆这类数据结构</p>

</section>

</a>

boycgit

</div>

</li>

</ul>

<span class="reading-time">阅读耗时约 10 分钟</span>

</footer>

</div>

</article>

</div>

</aside>

<span>JSCON-简时空</span>

</a>

</div>

<div class="floating-header-title">【经验总结】charles + SwitchyOmega 代理 https</div>

</svg>

</div>

<?xml version="1.0" standalone="no"?><svg t="1534600204727" class="icon" style="" viewbox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4202" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.03125" height="16"><defs><style type="text/css"></style></defs><path d="M1012.49 451.553v0.159c-6.697 20.66-28.861 31.99-49.449 25.288a39.352 39.352 0 0 1-25.287-49.582l-0.067-0.031c20.536-63.6 7.516-136.156-40.315-189.363-47.892-53.212-118.502-73.554-183.731-59.659-21.222 4.537-42.133-9.047-46.638-30.3-4.506-21.253 9.021-42.194 30.239-46.73 91.709-19.563 191.114 8.98 258.467 83.881 67.36 74.839 85.515 176.85 56.781 266.337z" fill="#ffffff" p-id="4203"></path><path d="M740.429 304.348v-0.03c-18.217 3.973-36.178-7.732-40.06-26.01-3.947-18.31 7.763-36.373 25.98-40.254 44.692-9.548 93.143 4.322 125.885 40.781 32.866 36.496 41.631 86.17 27.607 129.772a33.833 33.833 0 0 1-42.562 21.847c-17.782-5.76-27.484-24.914-21.724-42.69h-0.062c6.887-21.346 2.565-45.635-13.46-63.473-16.026-17.818-39.752-24.546-61.604-19.943z m30.05 192.184c-14.46-4.352-24.352-7.326-16.774-26.352 16.333-41.313 18.027-76.964 0.317-102.385-33.31-47.734-124.451-45.133-228.838-1.28 0-0.061-32.799 14.367-24.412-11.704 16.056-51.774 13.645-95.186-11.361-120.192-56.658-56.878-207.304 2.12-336.477 131.64C56.187 463.32 0 566.14 0 655.1 0 825.18 217.503 928.594 430.28 928.594c278.917 0 464.527-162.504 464.527-291.59 0-77.936-65.546-122.193-124.329-140.472zM430.842 867.62c-169.774 16.84-316.35-60.155-327.368-171.96-11.049-111.74 117.72-216.034 287.488-232.873 169.805-16.84 316.355 60.16 327.368 171.904 11.018 111.866-117.683 216.09-287.488 232.929z" fill="#ffffff" p-id="4204"></path><path d="M447.805 548.859c-80.783-21.09-172.119 19.287-207.206 90.65-35.743 72.862-1.188 153.681 80.44 180.1 84.578 27.357 184.233-14.525 218.88-93.148 34.181-76.81-8.478-155.94-92.114-177.602zM386.12 734.792c-16.43 26.29-51.584 37.806-78.065 25.661-26.107-11.889-33.833-42.44-17.403-68.045 16.215-25.538 50.207-36.869 76.498-25.856 26.604 11.392 35.087 41.687 18.97 68.24z" fill="#ffffff" p-id="4205"></path></svg> </a>

<?xml version="1.0" standalone="no"?><svg t="1534604253879" class="icon" style="" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5477" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css"></style></defs><path d="M693.12 347.232c11.776 0 23.36 0.896 35.008 2.176C696.768 203.36 540.672 94.88 362.432 94.88 163.2 94.88 0 230.624 0 403.104c0 99.521 54.272 181.248 145.024 244.736L108.8 756.832l126.72-63.488c45.312 8.896 81.664 18.112 126.912 18.112 11.393 0 22.656-0.513 33.792-1.345-7.04-24.256-11.199-49.6-11.199-76.031C385.088 475.744 521.024 347.232 693.12 347.232zM498.304 248.992c27.393 0 45.376 17.984 45.376 45.248 0 27.136-17.983 45.312-45.376 45.312-27.071 0-54.336-18.176-54.336-45.312C443.968 266.912 471.168 248.992 498.304 248.992zM244.672 339.552c-27.2 0-54.592-18.176-54.592-45.312 0-27.264 27.392-45.248 54.592-45.248 27.2 0 45.248 17.92 45.248 45.248C289.92 321.376 271.872 339.552 244.672 339.552z" p-id="5478" fill="#ffffff"></path><path d="M1024 629.728c0-144.896-145.023-262.976-307.904-262.976-172.479 0-308.224 118.144-308.224 262.976 0 145.28 135.808 262.977 308.224 262.977 36.097 0 72.513-9.024 108.736-18.112l99.392 54.528-27.264-90.624C969.729 783.84 1024 711.456 1024 629.728zM616.128 584.352c-17.984 0-36.224-17.92-36.224-36.224 0-18.048 18.239-36.225 36.224-36.225 27.521 0 45.376 18.177 45.376 36.225C661.504 566.432 643.648 584.352 616.128 584.352zM815.488 584.352c-17.856 0-36.032-17.92-36.032-36.224 0-18.048 18.112-36.225 36.032-36.225 27.264 0 45.376 18.177 45.376 36.225C860.864 566.432 842.752 584.352 815.488 584.352z" p-id="5479" fill="#ffffff"></path></svg> </a>

</div>

</div>

</progress>

</div>

(function () {

/**

* Get Node

* @param {String|Element} el

* @param {Boolean} noCache

* @return {Element}

var cacheNode = {};

function getNode(el, noCache) {

if (noCache === void 0) noCache = false;

if (typeof el === 'string') {

if (typeof window.Vue !== 'undefined') {

return find(el);

}

el = noCache ? find(el) : cacheNode[el] || (cacheNode[el] = find(el));

}

return el;

}

/**

* Find element

* @example

* find('nav') => document.querySelector('nav')

* find(nav, 'a') => nav.querySelector('a')

function find(el, node) {

return node ? el.querySelector(node) : document.querySelector(el);

}

function create(node, tpl) {

node = document.createElement(node);

if (tpl) {

node.innerHTML = tpl;

}

return node;

}

function appendTo(target, el) {

return target.appendChild(el);

}

function renderGitalkContainer() {

var div = create('div');

div.id = 'gitalk-container';

var main = getNode('#site-main');

div.style = 'width: ' + main.clientWidth + 'px; margin: 0 auto 20px;';

appendTo(find('#gitalk-component-wrap'), div);

var script = create('script');

var content = "gitalk.render('gitalk-container')";

}

renderGitalkContainer();

var gitalk = new Gitalk({

clientID: 'a65ee9e3ea5168da1470',

clientSecret: 'ebfd520679d1ad61929b1887b2efccd4872389e3',

repo: 'boycgit.github.io',

owner: 'boycgit',

admin: [

'boycgit'

id: location.pathname,

// facebook-like distraction free mode

distractionFreeMode: false

});

gitalk.render('gitalk-container');

var postImages = document.querySelectorAll('.post-content img');

Array.prototype.forEach.call(postImages, function (el, i) {

el.outerHTML = `<aholder href="${el.src}" data-lightbox="postImages" data-title="${el.alt}">${el.outerHTML}</aholder>`.replace(/aholder/g, 'a');

});

// 动态添加 js 脚本

setTimeout(function(){

var script = document.createElement("script");

script.type = "text/javascript";

script.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/lightbox.min.js";

document.getElementsByTagName('body')[0].appendChild(script);

script.onload = function () {

console.log('load success');

}

}, 1000);

})();

</script>

<a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>

</nav>

</div>

</footer>

</div>

</script>

// NOTE: Scroll performance is poor in Safari

// - this appears to be due to the events firing much more slowly in Safari.

// Dropping the scroll event and using only a raf loop results in smoother

// scrolling but continuous processing even when not scrolling

$(document).ready(function () {

// Start fitVids

var $postContent = $(".post-full-content");

$postContent.fitVids();

// End fitVids

var progressBar = document.querySelector('#reading-progress');

var header = document.querySelector('.floating-header');

var title = document.querySelector('.post-full-title');

var lastScrollY = window.scrollY;

var lastWindowHeight = window.innerHeight;

var lastDocumentHeight = $(document).height();

var ticking = false;

function onScroll() {

lastScrollY = window.scrollY;

requestTick();

}

function onResize() {

lastWindowHeight = window.innerHeight;

lastDocumentHeight = $(document).height();

requestTick();

}

function requestTick() {

if (!ticking) {

requestAnimationFrame(update);

}

ticking = true;

}

function update() {

var trigger = title.getBoundingClientRect().top + window.scrollY;

var triggerOffset = title.offsetHeight + 35;

var progressMax = lastDocumentHeight - lastWindowHeight;

// show/hide floating header

if (lastScrollY >= trigger + triggerOffset) {

header.classList.add('floating-active');

} else {

header.classList.remove('floating-active');

}

progressBar.setAttribute('max', progressMax);

progressBar.setAttribute('value', lastScrollY);

ticking = false;

}

window.addEventListener('scroll', onScroll, {passive: true});

window.addEventListener('resize', onResize, false);

update();

});

</script>

document.addEventListener("DOMContentLoaded", function() {

renderMathInElement(document.body);

});

</script>

</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

index.html

Latest commit

History

index.html

File metadata and controls